Converted <label> in <BaseLabel>

* add dark mode in sidebar and header

* add dark theme in blade file

.github/workflows/uffizzi-build.yml

@@ -14,6 +14,8 @@ jobs:
     steps:
       - name: Checkout git repo
         uses: actions/checkout@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2        
       - name: Generate UUID image name
         id: uuid
         run: echo "UUID_TAG_APP=$(uuidgen)" >> $GITHUB_ENV
@@ -31,10 +33,11 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           file: ./uffizzi/Dockerfile
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
 
   build-nginx:
-    needs: 
-      - build-application
     name: Build and Push `nginx`
     runs-on: ubuntu-latest
     if: ${{ github.event_name != 'pull_request' || github.event.action != 'closed' }}
@@ -62,8 +65,6 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           file: ./uffizzi/nginx/Dockerfile
-          build-args: |
-            BASE_IMAGE=${{ needs.build-application.outputs.tags }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
 

.gitignore

@@ -16,5 +16,4 @@ Homestead.yaml
 .gitkeep
 /public/docs
 /.scribe
-!storage/fonts/.gitkeep
+!storage/fonts/.gitkeep
-.DS_Store

app/Console/Commands/CreateTemplateCommand.php

@@ -55,7 +55,7 @@ class CreateTemplateCommand extends Command
         copy(public_path("/build/img/PDF/{$type}1.png"), public_path("/build/img/PDF/{$templateName}.png"));
         copy(resource_path("/static/img/PDF/{$type}1.png"), resource_path("/static/img/PDF/{$templateName}.png"));
 
-        $path = resource_path("views/app/pdf/{$type}/{$templateName}.blade.php");
+        $path = resource_path("app/pdf/{$type}/{$templateName}.blade.php");
         $type = ucfirst($type);
         $this->info("{$type} Template created successfully at ".$path);
 

app/Http/Controllers/V1/Admin/Customer/CustomerStatsController.php

@@ -103,6 +103,7 @@ class CustomerStatsController extends Controller
         )
             ->whereCompany()
             ->whereCustomer($customer->id)
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->sum('total');
         $totalReceipts = Payment::whereBetween(
             'payment_date',

app/Http/Controllers/V1/Admin/Dashboard/DashboardController.php

@@ -104,6 +104,7 @@ class DashboardController extends Controller
             'invoice_date',
             [$startDate->format('Y-m-d'), $start->format('Y-m-d')]
         )
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->whereCompany()
             ->sum('base_total');
 
@@ -141,6 +142,7 @@ class DashboardController extends Controller
         $recent_due_invoices = Invoice::with('customer')
             ->whereCompany()
             ->where('base_due_amount', '>', 0)
+            ->where('status', '<>', Invoice::STATUS_DRAFT)
             ->take(5)
             ->latest()
             ->get();

app/Http/Controllers/V1/Admin/Invoice/InvoicesController.php

@@ -24,6 +24,7 @@ class InvoicesController extends Controller
         $limit = $request->has('limit') ? $request->limit : 10;
 
         $invoices = Invoice::whereCompany()
+            ->whereTabFilters($request->tab_status)
             ->join('customers', 'customers.id', '=', 'invoices.customer_id')
             ->applyFilters($request->all())
             ->select('invoices.*', 'customers.name')

app/Http/Controllers/V1/Admin/MailSender/GetAllMailSendersController.php

@@ -1,24 +0,0 @@
-<?php
-
-namespace Crater\Http\Controllers\V1\Admin\MailSender;
-
-use Crater\Http\Controllers\Controller;
-use Crater\Http\Resources\MailSenderResource;
-use Crater\Models\MailSender;
-use Illuminate\Http\Request;
-
-class GetAllMailSendersController extends Controller
-{
-    /**
-     * Handle the incoming request.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
-    public function __invoke(Request $request)
-    {
-        $mailSenders = MailSender::whereCompany()->get();
-
-        return MailSenderResource::collection($mailSenders);
-    }
-}

app/Http/Controllers/V1/Admin/MailSender/MailSenderController.php

@@ -1,98 +0,0 @@
-<?php
-
-namespace Crater\Http\Controllers\V1\Admin\MailSender;
-
-use Crater\Http\Controllers\Controller;
-use Crater\Http\Requests\MailSenderRequest;
-use Crater\Http\Resources\MailSenderResource;
-use Crater\Models\MailSender;
-use Illuminate\Http\Request;
-
-class MailSenderController extends Controller
-{
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function index(Request $request)
-    {
-        $this->authorize('viewAny', MailSender::class);
-
-        $limit = $request->has('limit') ? $request->limit : 10;
-
-        $mailSenders = MailSender::whereCompany()
-            ->applyFilters($request->all())
-            ->paginateData($limit);
-
-        return (MailSenderResource::collection($mailSenders))
-            ->additional(['meta' => [
-                'mail_sender_total_count' => MailSender::whereCompany()->count(),
-            ]]);
-    }
-
-     /**
-     * Store a newly created resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
-    public function store(MailSenderRequest $request)
-    {
-        $this->authorize('create', MailSender::class);
-
-        $mailSender = MailSender::createFromRequest($request);
-
-        return new MailSenderResource($mailSender);
-    }
-
-    /**
-     * Display the specified resource.
-     *
-     * @param  \Crater\Models\SenderMail  $senderMail
-     * @return \Illuminate\Http\Response
-     */
-    public function show(MailSender $mailSender)
-    {
-        $this->authorize('view', $mailSender);
-
-        return new MailSenderResource($mailSender);
-    }
-
-    /**
-     * Update the specified resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  \Crater\Models\SenderMail  $senderMail
-     * @return \Illuminate\Http\Response
-     */
-    public function update(MailSenderRequest $request, MailSender $mailSender)
-    {
-        $this->authorize('update', $mailSender);
-
-        $mailSender->updateFromRequest($request);
-
-        return new MailSenderResource($mailSender);
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     *
-     * @param  \Crater\Models\SenderMail  $senderMail
-     * @return \Illuminate\Http\Response
-     */
-    public function destroy(MailSender $mailSender)
-    {
-        $this->authorize('delete', $mailSender);
-
-        if ($mailSender->is_default) {
-           return respondJson('You can\'t remove default mail sender.', 'You can\'t remove default mail sender.');
-        }
-
-        $mailSender->delete();
-
-        return response()->json([
-            'success' => true,
-        ]);
-    }
-}

app/Http/Controllers/V1/Admin/Settings/MailConfigurationController.php

@@ -3,29 +3,80 @@
 namespace Crater\Http\Controllers\V1\Admin\Settings;
 
 use Crater\Http\Controllers\Controller;
-use Crater\Http\Requests\TestMailDriverRequest;
+use Crater\Http\Requests\MailEnvironmentRequest;
 use Crater\Mail\TestMail;
-use Crater\Models\MailSender;
+use Crater\Models\Setting;
+use Crater\Space\EnvironmentManager;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Mail;
 
 class MailConfigurationController extends Controller
 {
-    public function TestMailDriver(TestMailDriverRequest $request)
+    /**
+     * @var EnvironmentManager
+     */
+    protected $environmentManager;
+
+    /**
+     * @param EnvironmentManager $environmentManager
+     */
+    public function __construct(EnvironmentManager $environmentManager)
+    {
+        $this->environmentManager = $environmentManager;
+    }
+
+    /**
+     *
+     * @param MailEnvironmentRequest $request
+     * @return JsonResponse
+     */
+    public function saveMailEnvironment(MailEnvironmentRequest $request)
     {
         $this->authorize('manage email config');
 
-        MailSender::setMailConfiguration($request->mail_sender_id);
+        $setting = Setting::getSetting('profile_complete');
+        $results = $this->environmentManager->saveMailVariables($request);
 
-        Mail::to($request->to)->send(new TestMail($request->subject, $request->message));
+        if ($setting !== 'COMPLETED') {
+            Setting::setSetting('profile_complete', 4);
+        }
 
-        return response()->json([
+        return response()->json($results);
-            'success' => true,
-        ]);
     }
 
-    public function getMailDrivers(Request $request)
+    public function getMailEnvironment()
     {
+        $this->authorize('manage email config');
+
+        $MailData = [
+            'mail_driver' => config('mail.driver'),
+            'mail_host' => config('mail.host'),
+            'mail_port' => config('mail.port'),
+            'mail_username' => config('mail.username'),
+            'mail_password' => config('mail.password'),
+            'mail_encryption' => config('mail.encryption'),
+            'from_name' => config('mail.from.name'),
+            'from_mail' => config('mail.from.address'),
+            'mail_mailgun_endpoint' => config('services.mailgun.endpoint'),
+            'mail_mailgun_domain' => config('services.mailgun.domain'),
+            'mail_mailgun_secret' => config('services.mailgun.secret'),
+            'mail_ses_key' => config('services.ses.key'),
+            'mail_ses_secret' => config('services.ses.secret'),
+        ];
+
+
+        return response()->json($MailData);
+    }
+
+    /**
+     *
+     * @return JsonResponse
+     */
+    public function getMailDrivers()
+    {
+        $this->authorize('manage email config');
+
         $drivers = [
             'smtp',
             'mail',
@@ -36,4 +87,21 @@ class MailConfigurationController extends Controller
 
         return response()->json($drivers);
     }
+
+    public function testEmailConfig(Request $request)
+    {
+        $this->authorize('manage email config');
+
+        $this->validate($request, [
+            'to' => 'required|email',
+            'subject' => 'required',
+            'message' => 'required',
+        ]);
+
+        Mail::to($request->to)->send(new TestMail($request->subject, $request->message));
+
+        return response()->json([
+            'success' => true,
+        ]);
+    }
 }

app/Http/Controllers/V1/Customer/EstimatePdfController.php

@@ -9,7 +9,6 @@ use Crater\Models\CompanySetting;
 use Crater\Models\Customer;
 use Crater\Models\EmailLog;
 use Crater\Models\Estimate;
-use Crater\Models\MailSender;
 use Illuminate\Http\Request;
 
 class EstimatePdfController extends Controller
@@ -28,16 +27,14 @@ class EstimatePdfController extends Controller
                 );
 
                 if ($notifyEstimateViewed == 'YES') {
-                    $notificationEmail = CompanySetting::getSetting('notification_email', $estimate->company_id);
-                    $mailSender = MailSender::where('company_id', $estimate->company_id)->where('is_default', true)->first();
-                    MailSender::setMailConfiguration($mailSender->id);
-
-                    $data['from_address'] = $mailSender->from_address;
-                    $data['from_name'] = $mailSender->from_name;
-                    $data['user'] = Customer::find($estimate->customer_id)->toArray();
                     $data['estimate'] = Estimate::findOrFail($estimate->id)->toArray();
+                    $data['user'] = Customer::find($estimate->customer_id)->toArray();
+                    $notificationEmail = CompanySetting::getSetting(
+                        'notification_email',
+                        $estimate->company_id
+                    );
 
-                    send_mail(new EstimateViewedMail($data), $mailSender, $notificationEmail);
+                    \Mail::to($notificationEmail)->send(new EstimateViewedMail($data));
                 }
             }
 

app/Http/Controllers/V1/Customer/InvoicePdfController.php

@@ -9,7 +9,6 @@ use Crater\Models\CompanySetting;
 use Crater\Models\Customer;
 use Crater\Models\EmailLog;
 use Crater\Models\Invoice;
-use Crater\Models\MailSender;
 use Illuminate\Http\Request;
 
 class InvoicePdfController extends Controller
@@ -29,16 +28,14 @@ class InvoicePdfController extends Controller
                 );
 
                 if ($notifyInvoiceViewed == 'YES') {
-                    $notificationEmail = CompanySetting::getSetting('notification_email', $invoice->company_id);
-                    $mailSender = MailSender::where('company_id', $invoice->company_id)->where('is_default', true)->first();
-                    MailSender::setMailConfiguration($mailSender->id);
-
-                    $data['from_address'] = $mailSender->from_address;
-                    $data['from_name'] = $mailSender->from_name;
                     $data['invoice'] = Invoice::findOrFail($invoice->id)->toArray();
                     $data['user'] = Customer::find($invoice->customer_id)->toArray();
+                    $notificationEmail = CompanySetting::getSetting(
+                        'notification_email',
+                        $invoice->company_id
+                    );
 
-                    send_mail(new InvoiceViewedMail($data), $mailSender, $notificationEmail);
+                    \Mail::to($notificationEmail)->send(new InvoiceViewedMail($data));
                 }
             }
 

app/Http/Middleware/ConfigMiddleware.php

@@ -4,7 +4,6 @@ namespace Crater\Http\Middleware;
 
 use Closure;
 use Crater\Models\FileDisk;
-use Crater\Models\MailSender;
 
 class ConfigMiddleware
 {
@@ -29,12 +28,6 @@ class ConfigMiddleware
             }
         }
 
-        $default_mail_sender = MailSender::where('company_id', $request->header('company'))->where('is_default', true)->first();
-
-        if ($default_mail_sender) {
-            $default_mail_sender->setMailConfiguration($default_mail_sender->id);
-        }
-
         return $next($request);
     }
 }

app/Http/Requests/CompaniesRequest.php

@@ -3,7 +3,6 @@
 namespace Crater\Http\Requests;
 
 use Illuminate\Foundation\Http\FormRequest;
-use Illuminate\Support\Str;
 use Illuminate\Validation\Rule;
 
 class CompaniesRequest extends FormRequest
@@ -34,6 +33,10 @@ class CompaniesRequest extends FormRequest
             'currency' => [
                 'required'
             ],
+            'slug' => [
+                'required',
+                Rule::unique('companies')
+            ],
             'address.name' => [
                 'nullable',
             ],
@@ -68,11 +71,11 @@ class CompaniesRequest extends FormRequest
     {
         return collect($this->validated())
             ->only([
-                'name'
+                'name',
+                'slug'
             ])
             ->merge([
-                'owner_id' => $this->user()->id,
+                'owner_id' => $this->user()->id
-                'slug' => Str::slug($this->name)
             ])
             ->toArray();
     }

app/Http/Requests/CompanyRequest.php

@@ -30,7 +30,8 @@ class CompanyRequest extends FormRequest
                 Rule::unique('companies')->ignore($this->header('company'), 'id'),
             ],
             'slug' => [
-                'nullable'
+                'required',
+                Rule::unique('companies')->ignore($this->header('company'), 'id'),
             ],
             'address.country_id' => [
                 'required',

app/Http/Requests/MailSenderRequest.php

@@ -1,85 +0,0 @@
-<?php
-
-namespace Crater\Http\Requests;
-
-use Illuminate\Validation\Rule;
-use Illuminate\Foundation\Http\FormRequest;
-
-class MailSenderRequest extends FormRequest
-{
-    /**
-     * Determine if the user is authorized to make this request.
-     *
-     * @return bool
-     */
-    public function authorize()
-    {
-        return true;
-    }
-
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array
-     */
-    public function rules()
-    {
-        $rules = [
-            'name' => [
-                'required',
-                Rule::unique('mail_senders')
-                ->where('company_id', $this->header('company'))
-            ],
-            'driver' => [
-                'required',
-            ],
-            'is_default' => [
-                'nullable'
-            ],
-            'bcc' => [
-                'nullable'
-            ],
-            'cc' => [
-                'nullable'
-            ],
-            'from_address' => [
-                'nullable'
-            ],
-            'from_name' => [
-                'nullable'
-            ],
-            'settings' => [
-                'nullable'
-            ],
-            'settings.*' => [
-                'nullable'
-            ]
-        ];
-
-        if ($this->isMethod('PUT')) {
-            $rules['name'] = [
-                'nullable',
-                Rule::unique('mail_senders')
-                    ->ignore($this->route('mail_sender')->id)
-                    ->where('company_id', $this->header('company'))
-            ];
-        }
-
-        return $rules;
-    }
-
-    public function getMailSenderPayload()
-    {
-        $data = $this->validated();
-
-        if ($data['settings'] && $data['settings']['encryption'] == 'none') {
-            $data['settings']['encryption'] = '';
-        }
-
-        return collect($data)
-            ->merge([
-                'company_id' => $this->header('company'),
-            ])
-            ->toArray();
-    }
-}

app/Http/Requests/SendEstimatesRequest.php

@@ -30,7 +30,7 @@ class SendEstimatesRequest extends FormRequest
             'body' => [
                 'required',
             ],
-            'mail_sender_id' => [
+            'from' => [
                 'required',
             ],
             'to' => [

app/Http/Requests/SendInvoiceRequest.php

@@ -30,7 +30,7 @@ class SendInvoiceRequest extends FormRequest
             'subject' => [
                 'required',
             ],
-            'mail_sender_id' => [
+            'from' => [
                 'required',
             ],
             'to' => [

app/Http/Requests/SendPaymentRequest.php

@@ -30,7 +30,7 @@ class SendPaymentRequest extends FormRequest
             'body' => [
                 'required',
             ],
-            'mail_sender_id' => [
+            'from' => [
                 'required',
             ],
             'to' => [

app/Http/Requests/TestMailDriverRequest.php

@@ -1,39 +0,0 @@
-<?php
-
-namespace Crater\Http\Requests;
-
-use Illuminate\Foundation\Http\FormRequest;
-
-class TestMailDriverRequest extends FormRequest
-{
-    /**
-     * Determine if the user is authorized to make this request.
-     *
-     * @return bool
-     */
-    public function authorize()
-    {
-        return true;
-    }
-
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array
-     */
-    public function rules()
-    {
-        return [
-            'to' => [
-                'required',
-                'email'
-            ],
-            'subject' => [
-                'required'
-            ],
-            'message' => [
-                'required'
-            ],
-        ];
-    }
-}

app/Http/Resources/EstimateResource.php

@@ -23,7 +23,7 @@ class EstimateResource extends JsonResource
             'reference_number' => $this->reference_number,
             'tax_per_item' => $this->tax_per_item,
             'discount_per_item' => $this->discount_per_item,
-            'notes' => $this->getNotes(),
+            'notes' => $this->notes,
             'discount' => $this->discount,
             'discount_type' => $this->discount_type,
             'discount_val' => $this->discount_val,

app/Http/Resources/MailSenderResource.php

@@ -1,30 +0,0 @@
-<?php
-
-namespace Crater\Http\Resources;
-
-use Illuminate\Http\Resources\Json\JsonResource;
-
-class MailSenderResource extends JsonResource
-{
-    /**
-     * Transform the resource into an array.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
-     */
-    public function toArray($request)
-    {
-        return [
-            'id' => $this->id,
-            'name' => $this->name,
-            'driver' => $this->driver,
-            'is_default' => $this->is_default,
-            'bcc' => $this->bcc,
-            'cc' => $this->cc,
-            'from_address' => $this->from_address,
-            'from_name' => $this->from_name,
-            'company_id' => $this->company_id,
-            'settings' => $this->settings
-        ];
-    }
-}

app/Http/Resources/PaymentResource.php

@@ -18,7 +18,7 @@ class PaymentResource extends JsonResource
             'id' => $this->id,
             'payment_number' => $this->payment_number,
             'payment_date' => $this->payment_date,
-            'notes' => $this->getNotes(),
+            'notes' => $this->notes,
             'amount' => $this->amount,
             'unique_hash' => $this->unique_hash,
             'invoice_id' => $this->invoice_id,

app/Mail/EstimateViewedMail.php

@@ -30,7 +30,7 @@ class EstimateViewedMail extends Mailable
      */
     public function build()
     {
-        return $this->from($this->data['from_address'], $this->data['from_name'])
+        return $this->from(config('mail.from.address'), config('mail.from.name'))
                     ->markdown('emails.viewed.estimate', ['data', $this->data]);
     }
 }

app/Mail/InvoiceViewedMail.php

@@ -30,7 +30,7 @@ class InvoiceViewedMail extends Mailable
      */
     public function build()
     {
-        return $this->from($this->data['from_address'], $this->data['from_name'])
+        return $this->from(config('mail.from.address'), config('mail.from.name'))
                     ->markdown('emails.viewed.invoice', ['data', $this->data]);
     }
 }

app/Mail/SendEstimateMail.php

@@ -34,7 +34,7 @@ class SendEstimateMail extends Mailable
     public function build()
     {
         $log = EmailLog::create([
-            'from' => $this->data['from_address'],
+            'from' => $this->data['from'],
             'to' => $this->data['to'],
             'subject' => $this->data['subject'],
             'body' => $this->data['body'],
@@ -47,10 +47,9 @@ class SendEstimateMail extends Mailable
 
         $this->data['url'] = route('estimate', ['email_log' => $log->token]);
 
-        $mailContent = $this->from($this->data['from_address'], $this->data['from_name'])
+        $mailContent = $this->from($this->data['from'], config('mail.from.name'))
-            ->subject($this->data['subject'])
+                    ->subject($this->data['subject'])
-            ->markdown("emails.send.estimate", ['data', $this->data]);
+                    ->markdown('emails.send.estimate', ['data', $this->data]);
-
 
         if ($this->data['attach']['data']) {
             $mailContent->attachData(

app/Mail/SendInvoiceMail.php

@@ -34,7 +34,7 @@ class SendInvoiceMail extends Mailable
     public function build()
     {
         $log = EmailLog::create([
-            'from' => $this->data['from_address'],
+            'from' => $this->data['from'],
             'to' => $this->data['to'],
             'subject' => $this->data['subject'],
             'body' => $this->data['body'],
@@ -47,9 +47,9 @@ class SendInvoiceMail extends Mailable
 
         $this->data['url'] = route('invoice', ['email_log' => $log->token]);
 
-        $mailContent = $this->from($this->data['from_address'], $this->data['from_name'])
+        $mailContent = $this->from($this->data['from'], config('mail.from.name'))
             ->subject($this->data['subject'])
-            ->markdown("emails.send.invoice", ['data', $this->data]);
+            ->markdown('emails.send.invoice', ['data', $this->data]);
 
         if ($this->data['attach']['data']) {
             $mailContent->attachData(

app/Mail/SendPaymentMail.php

@@ -34,7 +34,7 @@ class SendPaymentMail extends Mailable
     public function build()
     {
         $log = EmailLog::create([
-            'from' => $this->data['from_address'],
+            'from' => $this->data['from'],
             'to' => $this->data['to'],
             'subject' => $this->data['subject'],
             'body' => $this->data['body'],
@@ -47,9 +47,9 @@ class SendPaymentMail extends Mailable
 
         $this->data['url'] = route('payment', ['email_log' => $log->token]);
 
-        $mailContent = $this->from($this->data['from_address'], $this->data['from_name'])
+        $mailContent = $this->from($this->data['from'], config('mail.from.name'))
-            ->subject($this->data['subject'])
+                    ->subject($this->data['subject'])
-            ->markdown("emails.send.payment", ['data', $this->data]);
+                    ->markdown('emails.send.payment', ['data', $this->data]);
 
         if ($this->data['attach']['data']) {
             $mailContent->attachData(

app/Models/Company.php

@@ -217,7 +217,7 @@ class Company extends Model implements HasMedia
             'estimate_billing_address_format' => $billingAddressFormat,
             'payment_company_address_format' => $companyAddressFormat,
             'payment_from_customer_address_format' => $paymentFromCustomerAddress,
-            'currency' => request()->currency ?? 13,
+            'currency' => request()->currency ?? 1,
             'time_zone' => 'Asia/Kolkata',
             'language' => 'en',
             'fiscal_year' => '1-12',

app/Models/Estimate.php

@@ -5,10 +5,10 @@ namespace Crater\Models;
 use App;
 use Barryvdh\DomPDF\Facade as PDF;
 use Carbon\Carbon;
+use Crater\Mail\SendEstimateMail;
 use Crater\Services\SerialNumberFormatter;
 use Crater\Traits\GeneratesPdfTrait;
 use Crater\Traits\HasCustomFieldsTrait;
-use Crater\Traits\MailTrait;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Storage;
@@ -20,7 +20,6 @@ use Vinkla\Hashids\Facades\Hashids;
 class Estimate extends Model implements HasMedia
 {
     use HasFactory;
-    use MailTrait;
     use InteractsWithMedia;
     use GeneratesPdfTrait;
     use HasCustomFieldsTrait;
@@ -364,7 +363,7 @@ class Estimate extends Model implements HasMedia
             $this->save();
         }
 
-        $this->setMail('estimate', $data);
+        \Mail::to($data['to'])->send(new SendEstimateMail($data));
 
         return [
             'success' => true,
@@ -484,7 +483,8 @@ class Estimate extends Model implements HasMedia
             '{ESTIMATE_DATE}' => $this->formattedEstimateDate,
             '{ESTIMATE_EXPIRY_DATE}' => $this->formattedExpiryDate,
             '{ESTIMATE_NUMBER}' => $this->estimate_number,
-            '{ESTIMATE_REF_NUMBER}' => $this->reference_number,
+            '{PDF_LINK}' => $this->estimatePdfUrl,
+            '{TOTAL_AMOUNT}' => format_money_pdf($this->total, $this->customer->currency)
         ];
     }
 

app/Models/Expense.php

@@ -240,7 +240,7 @@ class Expense extends Model implements HasMedia
         }
 
         if ($request->hasFile('attachment_receipt')) {
-            $expense->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts');
+            $expense->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts', 'local');
         }
 
         if ($request->customFields) {
@@ -262,12 +262,12 @@ class Expense extends Model implements HasMedia
             ExchangeRateLog::addExchangeRateLog($this);
         }
 
-        if (isset($request->is_attachment_receipt_removed) && (bool) $request->is_attachment_receipt_removed) {
+        if (isset($request->is_attachment_receipt_removed) && $request->is_attachment_receipt_removed == "true") {
             $this->clearMediaCollection('receipts');
         }
         if ($request->hasFile('attachment_receipt')) {
             $this->clearMediaCollection('receipts');
-            $this->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts');
+            $this->addMediaFromRequest('attachment_receipt')->toMediaCollection('receipts', 'local');
         }
 
         if ($request->customFields) {

app/Models/Invoice.php

@@ -9,7 +9,6 @@ use Crater\Mail\SendInvoiceMail;
 use Crater\Services\SerialNumberFormatter;
 use Crater\Traits\GeneratesPdfTrait;
 use Crater\Traits\HasCustomFieldsTrait;
-use Crater\Traits\MailTrait;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Storage;
@@ -22,7 +21,6 @@ use Vinkla\Hashids\Facades\Hashids;
 class Invoice extends Model implements HasMedia
 {
     use HasFactory;
-    use MailTrait;
     use InteractsWithMedia;
     use GeneratesPdfTrait;
     use HasCustomFieldsTrait;
@@ -189,16 +187,6 @@ class Invoice extends Model implements HasMedia
         return Carbon::parse($this->invoice_date)->format($dateFormat);
     }
 
-    public function scopeWhereStatus($query, $status)
-    {
-        return $query->where('invoices.status', $status);
-    }
-
-    public function scopeWherePaidStatus($query, $status)
-    {
-        return $query->where('invoices.paid_status', $status);
-    }
-
     public function scopeWhereDueStatus($query, $status)
     {
         return $query->whereIn('invoices.paid_status', [
@@ -236,6 +224,40 @@ class Invoice extends Model implements HasMedia
         $query->orderBy($orderByField, $orderBy);
     }
 
+    public function scopeWhereStatus($query, $status)
+    {
+        return $query->where('invoices.status', $status);
+    }
+
+    public function scopeWherePaidStatus($query, $status)
+    {
+        return $query->where('invoices.paid_status', $status);
+    }
+
+    public function scopeWhereTabFilters($query, $status)
+    {
+        if ($status == "DRAFT") {
+            return $query->where('invoices.status', $status);
+        }
+
+        if ($status == "SENT") {
+            return $query->whereIn('invoices.status', [
+                self::STATUS_SENT,
+                self::STATUS_VIEWED,
+                self::STATUS_COMPLETED
+            ]);
+        }
+
+        if ($status == 'DUE') {
+            return $query->whereIn('invoices.paid_status', [
+                self::STATUS_UNPAID,
+                self::STATUS_PARTIALLY_PAID,
+            ]);
+        }
+
+        return ;
+    }
+
     public function scopeApplyFilters($query, array $filters)
     {
         $filters = collect($filters);
@@ -251,17 +273,11 @@ class Invoice extends Model implements HasMedia
                 $filters->get('status') == self::STATUS_PAID
             ) {
                 $query->wherePaidStatus($filters->get('status'));
-            } elseif ($filters->get('status') == 'DUE') {
-                $query->whereDueStatus($filters->get('status'));
             } else {
                 $query->whereStatus($filters->get('status'));
             }
         }
 
-        if ($filters->get('paid_status')) {
-            $query->wherePaidStatus($filters->get('status'));
-        }
-
         if ($filters->get('invoice_id')) {
             $query->whereInvoice($filters->get('invoice_id'));
         }
@@ -466,7 +482,7 @@ class Invoice extends Model implements HasMedia
     {
         $data = $this->sendInvoiceData($data);
 
-        $this->setMail('invoice', $data);
+        \Mail::to($data['to'])->send(new SendInvoiceMail($data));
 
         if ($this->status == Invoice::STATUS_DRAFT) {
             $this->status = Invoice::STATUS_SENT;
@@ -653,7 +669,9 @@ class Invoice extends Model implements HasMedia
             '{INVOICE_DATE}' => $this->formattedInvoiceDate,
             '{INVOICE_DUE_DATE}' => $this->formattedDueDate,
             '{INVOICE_NUMBER}' => $this->invoice_number,
-            '{INVOICE_REF_NUMBER}' => $this->reference_number,
+            '{PDF_LINK}' => $this->invoicePdfUrl,
+            '{DUE_AMOUNT}' => format_money_pdf($this->due_amount, $this->customer->currency),
+            '{TOTAL_AMOUNT}' => format_money_pdf($this->total, $this->customer->currency)
         ];
     }
 

app/Models/MailSender.php

@@ -1,111 +0,0 @@
-<?php
-
-namespace Crater\Models;
-
-use Crater\Http\Requests\MailSenderRequest;
-use Illuminate\Database\Eloquent\Factories\HasFactory;
-use Illuminate\Database\Eloquent\Model;
-use Config;
-
-class MailSender extends Model
-{
-    use HasFactory;
-
-    protected $guarded = [
-        'id'
-    ];
-
-    protected $casts = [
-        'settings' => 'array',
-        'is_default' => 'boolean'
-    ];
-
-    public function company()
-    {
-        return $this->belongsTo(Company::class);
-    }
-
-    public function scopeWhereOrder($query, $orderByField, $orderBy)
-    {
-        $query->orderBy($orderByField, $orderBy);
-    }
-
-    public function scopeApplyFilters($query, array $filters)
-    {
-        $filters = collect($filters);
-
-        if ($filters->get('orderByField') || $filters->get('orderBy')) {
-            $field = $filters->get('orderByField') ? $filters->get('orderByField') : 'name';
-            $orderBy = $filters->get('orderBy') ? $filters->get('orderBy') : 'desc';
-            $query->whereOrder($field, $orderBy);
-        }
-    }
-
-    public function scopePaginateData($query, $limit)
-    {
-        if ($limit == 'all') {
-            return $query->get();
-        }
-
-        return $query->paginate($limit);
-    }
-
-    public function scopeWhereCompany($query)
-    {
-        $query->where('mail_senders.company_id', request()->header('company'));
-    }
-
-    public static function createFromRequest(MailSenderRequest $request)
-    {
-        $senderMail = self::create($request->getMailSenderPayload());
-
-        if ($request->is_default) {
-            $senderMail->removeOtherDefaultMailSenders($request);
-        }
-
-        return $senderMail;
-    }
-
-    public function updateFromRequest(MailSenderRequest $request)
-    {
-        $data = $request->getMailSenderPayload();
-
-        $this->update($data);
-
-        if ($request->is_default) {
-            $this->removeOtherDefaultMailSenders($request);
-        }
-
-        return $this;
-    }
-
-    public static function setMailConfiguration($id, $check = null)
-    {
-        $mailSender = MailSender::find($id);
-
-        $settings = $mailSender->settings;
-        $settings['driver'] = $mailSender->driver;
-        $settings['from'] = [
-            'address' => $mailSender->from_address,
-            'name' => $mailSender->from_name
-        ];
-        $settings['sendmail'] = config('mail.sendmail');
-        $settings['markdown'] = config('mail.markdown');
-        $settings['log_channel'] = config('mail.log_channel');
-
-        Config::set('mail', $settings);
-
-        if ($check) {
-            return $mailSender;
-        }
-
-        return true;
-    }
-
-    public function removeOtherDefaultMailSenders($request) {
-        MailSender::where('company_id', $request->header('company'))
-            ->where('is_default', true)
-            ->where('id', '<>', $this->id)
-            ->update(['is_default' => false]);
-    }
-}

app/Models/Payment.php

@@ -5,10 +5,10 @@ namespace Crater\Models;
 use Barryvdh\DomPDF\Facade as PDF;
 use Carbon\Carbon;
 use Crater\Jobs\GeneratePaymentPdfJob;
+use Crater\Mail\SendPaymentMail;
 use Crater\Services\SerialNumberFormatter;
 use Crater\Traits\GeneratesPdfTrait;
 use Crater\Traits\HasCustomFieldsTrait;
-use Crater\Traits\MailTrait;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Spatie\MediaLibrary\HasMedia;
@@ -18,7 +18,6 @@ use Vinkla\Hashids\Facades\Hashids;
 class Payment extends Model implements HasMedia
 {
     use HasFactory;
-    use MailTrait;
     use InteractsWithMedia;
     use GeneratesPdfTrait;
     use HasCustomFieldsTrait;
@@ -136,7 +135,7 @@ class Payment extends Model implements HasMedia
     {
         $data = $this->sendPaymentData($data);
 
-        $this->setMail('payment', $data);
+        \Mail::to($data['to'])->send(new SendPaymentMail($data));
 
         return [
             'success' => true,
@@ -436,7 +435,8 @@ class Payment extends Model implements HasMedia
             '{PAYMENT_DATE}' => $this->formattedPaymentDate,
             '{PAYMENT_MODE}' => $this->paymentMethod ? $this->paymentMethod->name : null,
             '{PAYMENT_NUMBER}' => $this->payment_number,
-            '{PAYMENT_AMOUNT}' => $this->reference_number,
+            '{PDF_LINK}' => $this->paymentPdfUrl,
+            '{PAYMENT_AMOUNT}' => format_money_pdf($this->amount, $this->customer->currency)
         ];
     }
 

app/Policies/MailSenderPolicy.php

@@ -1,123 +0,0 @@
-<?php
-
-namespace Crater\Policies;
-
-use Crater\Models\MailSender;
-use Crater\Models\User;
-use Illuminate\Auth\Access\HandlesAuthorization;
-use Silber\Bouncer\BouncerFacade;
-
-class MailSenderPolicy
-{
-    use HandlesAuthorization;
-
-    /**
-     * Determine whether the user can view any models.
-     *
-     * @param  \Crater\Models\User  $user
-     * @return \Illuminate\Auth\Access\Response|bool
-     */
-    public function viewAny(User $user)
-    {
-        if (BouncerFacade::can('view-mail-sender', MailSender::class)) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Determine whether the user can view the model.
-     *
-     * @param  \Crater\Models\User  $user
-     * @param  \Crater\Models\MailSender  $mailSender
-     * @return \Illuminate\Auth\Access\Response|bool
-     */
-    public function view(User $user, MailSender $mailSender)
-    {
-        if (BouncerFacade::can('view-mail-sender', $mailSender) && $user->hasCompany($mailSender->company_id)) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Determine whether the user can create models.
-     *
-     * @param  \Crater\Models\User  $user
-     * @return \Illuminate\Auth\Access\Response|bool
-     */
-    public function create(User $user)
-    {
-        if (BouncerFacade::can('create-mail-sender', MailSender::class)) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Determine whether the user can update the model.
-     *
-     * @param  \Crater\Models\User  $user
-     * @param  \Crater\Models\MailSender  $mailSender
-     * @return \Illuminate\Auth\Access\Response|bool
-     */
-    public function update(User $user, MailSender $mailSender)
-    {
-        if (BouncerFacade::can('edit-mail-sender', $mailSender) && $user->hasCompany($mailSender->company_id)) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Determine whether the user can delete the model.
-     *
-     * @param  \Crater\Models\User  $user
-     * @param  \Crater\Models\MailSender  $mailSender
-     * @return \Illuminate\Auth\Access\Response|bool
-     */
-    public function delete(User $user, MailSender $mailSender)
-    {
-        if (BouncerFacade::can('delete-mail-sender', $mailSender) && $user->hasCompany($mailSender->company_id)) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Determine whether the user can restore the model.
-     *
-     * @param  \Crater\Models\User  $user
-     * @param  \Crater\Models\MailSender  $mailSender
-     * @return \Illuminate\Auth\Access\Response|bool
-     */
-    public function restore(User $user, MailSender $mailSender)
-    {
-        if (BouncerFacade::can('delete-mail-sender', $mailSender) && $user->hasCompany($mailSender->company_id)) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Determine whether the user can permanently delete the model.
-     *
-     * @param  \Crater\Models\User  $user
-     * @param  \Crater\Models\MailSender  $mailSender
-     * @return \Illuminate\Auth\Access\Response|bool
-     */
-    public function forceDelete(User $user, MailSender $mailSender)
-    {
-        if (BouncerFacade::can('delete-mail-sender', $mailSender) && $user->hasCompany($mailSender->company_id)) {
-            return true;
-        }
-
-        return false;
-    }
-}

app/Providers/AuthServiceProvider.php

@@ -39,7 +39,6 @@ class AuthServiceProvider extends ServiceProvider
         \Crater\Models\CustomField::class => \Crater\Policies\CustomFieldPolicy::class,
         \Crater\Models\User::class => \Crater\Policies\UserPolicy::class,
         \Crater\Models\Item::class => \Crater\Policies\ItemPolicy::class,
-        \Crater\Models\MailSender::class => \Crater\Policies\MailSenderPolicy::class,
         \Silber\Bouncer\Database\Role::class => \Crater\Policies\RolePolicy::class,
         \Crater\Models\Unit::class => \Crater\Policies\UnitPolicy::class,
         \Crater\Models\RecurringInvoice::class => \Crater\Policies\RecurringInvoicePolicy::class,

app/Space/EnvironmentManager.php

@@ -223,6 +223,204 @@ class EnvironmentManager
         return false;
     }
 
+    /**
+    * Save the mail content to the .env file.
+    *
+    * @param Request $request
+    * @return array
+    */
+    public function saveMailVariables(MailEnvironmentRequest $request)
+    {
+        $mailData = $this->getMailData($request);
+
+        try {
+            file_put_contents($this->envPath, str_replace(
+                $mailData['old_mail_data'],
+                $mailData['new_mail_data'],
+                file_get_contents($this->envPath)
+            ));
+
+            if ($mailData['extra_old_mail_data']) {
+                file_put_contents($this->envPath, str_replace(
+                    $mailData['extra_old_mail_data'],
+                    $mailData['extra_mail_data'],
+                    file_get_contents($this->envPath)
+                ));
+            } else {
+                file_put_contents(
+                    $this->envPath,
+                    "\n".$mailData['extra_mail_data'],
+                    FILE_APPEND
+                );
+            }
+        } catch (Exception $e) {
+            return [
+                'error' => 'mail_variables_save_error',
+            ];
+        }
+
+        return [
+            'success' => 'mail_variables_save_successfully',
+        ];
+    }
+
+    private function getMailData($request)
+    {
+        $mailFromCredential = "";
+        $extraMailData = "";
+        $extraOldMailData = "";
+        $oldMailData = "";
+        $newMailData = "";
+
+        if (env('MAIL_FROM_ADDRESS') !== null && env('MAIL_FROM_NAME') !== null) {
+            $mailFromCredential =
+                'MAIL_FROM_ADDRESS='.config('mail.from.address')."\n".
+                'MAIL_FROM_NAME="'.config('mail.from.name')."\"\n\n";
+        }
+
+        switch ($request->mail_driver) {
+            case 'smtp':
+
+                $oldMailData =
+                    'MAIL_DRIVER='.config('mail.driver')."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    $mailFromCredential;
+
+                $newMailData =
+                    'MAIL_DRIVER='.$request->mail_driver."\n".
+                    'MAIL_HOST='.$request->mail_host."\n".
+                    'MAIL_PORT='.$request->mail_port."\n".
+                    'MAIL_USERNAME='.$request->mail_username."\n".
+                    'MAIL_PASSWORD='.$request->mail_password."\n".
+                    'MAIL_ENCRYPTION='.$request->mail_encryption."\n\n".
+                    'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
+                    'MAIL_FROM_NAME="'.$request->from_name."\"\n\n";
+
+                break;
+
+            case 'mailgun':
+                $oldMailData =
+                    'MAIL_DRIVER='.config('mail.driver')."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    $mailFromCredential;
+
+                $newMailData =
+                    'MAIL_DRIVER='.$request->mail_driver."\n".
+                    'MAIL_HOST='.$request->mail_host."\n".
+                    'MAIL_PORT='.$request->mail_port."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.$request->mail_encryption."\n\n".
+                    'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
+                    'MAIL_FROM_NAME="'.$request->from_name."\"\n\n";
+
+                $extraMailData =
+                    'MAILGUN_DOMAIN='.$request->mail_mailgun_domain."\n".
+                    'MAILGUN_SECRET='.$request->mail_mailgun_secret."\n".
+                    'MAILGUN_ENDPOINT='.$request->mail_mailgun_endpoint."\n";
+
+                if (env('MAILGUN_DOMAIN') !== null && env('MAILGUN_SECRET') !== null && env('MAILGUN_ENDPOINT') !== null) {
+                    $extraOldMailData =
+                        'MAILGUN_DOMAIN='.config('services.mailgun.domain')."\n".
+                        'MAILGUN_SECRET='.config('services.mailgun.secret')."\n".
+                        'MAILGUN_ENDPOINT='.config('services.mailgun.endpoint')."\n";
+                }
+
+                break;
+
+            case 'ses':
+                $oldMailData =
+                    'MAIL_DRIVER='.config('mail.driver')."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    $mailFromCredential;
+
+                $newMailData =
+                    'MAIL_DRIVER='.$request->mail_driver."\n".
+                    'MAIL_HOST='.$request->mail_host."\n".
+                    'MAIL_PORT='.$request->mail_port."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.$request->mail_encryption."\n\n".
+                    'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
+                    'MAIL_FROM_NAME="'.$request->from_name."\"\n\n";
+
+                $extraMailData =
+                    'SES_KEY='.$request->mail_ses_key."\n".
+                    'SES_SECRET='.$request->mail_ses_secret."\n";
+
+                if (env('SES_KEY') !== null && env('SES_SECRET') !== null) {
+                    $extraOldMailData =
+                        'SES_KEY='.config('services.ses.key')."\n".
+                        'SES_SECRET='.config('services.ses.secret')."\n";
+                }
+
+                break;
+
+            case 'mail':
+                $oldMailData =
+                    'MAIL_DRIVER='.config('mail.driver')."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    $mailFromCredential;
+
+                $newMailData =
+                    'MAIL_DRIVER='.$request->mail_driver."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
+                    'MAIL_FROM_NAME="'.$request->from_name."\"\n\n";
+
+                break;
+
+            case 'sendmail':
+                $oldMailData =
+                    'MAIL_DRIVER='.config('mail.driver')."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    $mailFromCredential;
+
+                $newMailData =
+                    'MAIL_DRIVER='.$request->mail_driver."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    'MAIL_USERNAME='.config('mail.username')."\n".
+                    'MAIL_PASSWORD='.config('mail.password')."\n".
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
+                    'MAIL_FROM_NAME="'.$request->from_name."\"\n\n";
+
+                break;
+        }
+
+        return [
+            'old_mail_data' => $oldMailData,
+            'new_mail_data' => $newMailData,
+            'extra_mail_data' => $extraMailData,
+            'extra_old_mail_data' => $extraOldMailData,
+        ];
+    }
+
     /**
      * Save the disk content to the .env file.
      *

app/Space/helpers.php

@@ -5,7 +5,6 @@ use Crater\Models\Currency;
 use Crater\Models\CustomField;
 use Crater\Models\Setting;
 use Illuminate\Support\Str;
-use Illuminate\Mail\Mailable;
 
 /**
  * Get company setting
@@ -71,42 +70,6 @@ function set_active($path, $active = 'active')
     return call_user_func_array('Request::is', (array)$path) ? $active : '';
 }
 
-/**
- * Send Mail
- *
- * @param Mailable $mailable
- * @param object $mailSender
- * @return string $to
- */
-function send_mail(Mailable $mailable, object $mailSender = null, string $to)
-{
-    if ($mailSender->bcc && $mailSender->cc) {
-        \Mail::to($to)
-                ->bcc(explode(',', $mailSender->bcc))
-                ->cc(explode(',', $mailSender->cc))
-                ->send($mailable);
-    }
-
-    if ($mailSender->bcc && $mailSender->cc == null) {
-        \Mail::to($to)
-            ->bcc(explode(',', $mailSender->bcc))
-            ->send($mailable);
-    }
-
-    if ($mailSender->bcc == null && $mailSender->cc) {
-        \Mail::to($to)
-            ->cc(explode(',', $mailSender->cc))
-            ->send($mailable);
-    }
-
-    if ($mailSender->bcc == null && $mailSender->cc == null) {
-        \Mail::to($to)
-            ->send($mailable);
-    }
-
-    return true;
-}
-
 /**
  * @param $path
  * @return mixed

app/Traits/MailTrait.php

@@ -1,40 +0,0 @@
-<?php
-
-namespace Crater\Traits;
-
-use Crater\Mail\EstimateViewedMail;
-use Crater\Mail\InvoiceViewedMail;
-use Crater\Mail\SendEstimateMail;
-use Crater\Mail\SendInvoiceMail;
-use Crater\Mail\SendPaymentMail;
-use Crater\Models\MailSender;
-
-trait MailTrait
-{
-    public function setMail($model, $data)
-    {
-        $mailSender = MailSender::setMailConfiguration($data['mail_sender_id'], true);
-
-        $data['from_address'] = $mailSender->from_address;
-        $data['from_name'] = $mailSender->from_name;
-
-        switch ($model) {
-            case 'invoice':
-               send_mail(new SendInvoiceMail($data), $mailSender, $data['to']);
-
-                break;
-
-            case 'estimate':
-               send_mail(new SendEstimateMail($data), $mailSender, $data['to']);
-
-                break;
-
-            case 'payment':
-               send_mail(new SendPaymentMail($data), $mailSender, $data['to']);
-
-                break;
-        }
-
-        return true;
-    }
-}

config/abilities.php

@@ -7,7 +7,6 @@ use Crater\Models\ExchangeRateProvider;
 use Crater\Models\Expense;
 use Crater\Models\Invoice;
 use Crater\Models\Item;
-use Crater\Models\MailSender;
 use Crater\Models\Note;
 use Crater\Models\Payment;
 use Crater\Models\RecurringInvoice;
@@ -398,41 +397,6 @@ return [
             ]
         ],
 
-        // Mail Sender
-        [
-            "name" => "view mail sender",
-            "ability" => "view-mail-sender",
-            "model" => MailSender::class,
-            'owner_only' => false,
-        ],
-        [
-            "name" => "create mail sender",
-            "ability" => "create-mail-sender",
-            "model" => MailSender::class,
-            'owner_only' => false,
-            "depends_on" => [
-                'view-mail-sender',
-            ]
-        ],
-        [
-            "name" => "edit mail sender",
-            "ability" => "edit-mail-sender",
-            "model" => MailSender::class,
-            'owner_only' => false,
-            "depends_on" => [
-                'view-mail-sender',
-            ]
-        ],
-        [
-            "name" => "delete mail sender",
-            "ability" => "delete-mail-sender",
-            "model" => MailSender::class,
-            'owner_only' => false,
-            "depends_on" => [
-                'view-mail-sender',
-            ]
-        ],
-
         // Settings
         [
             "name" => "view company dashboard",

config/crater.php

@@ -7,7 +7,6 @@ use Crater\Models\ExchangeRateProvider;
 use Crater\Models\Expense;
 use Crater\Models\Invoice;
 use Crater\Models\Item;
-use Crater\Models\MailSender;
 use Crater\Models\Note;
 use Crater\Models\Payment;
 use Crater\Models\RecurringInvoice;
@@ -226,17 +225,6 @@ return [
             'ability' => 'view-all-notes',
             'model' => Note::class
         ],
-        [
-            'title' => 'settings.menu_title.mail_sender',
-            'group' => '',
-            'name' => 'Mail Sender',
-            'link' => '/admin/settings/mail-sender',
-            'icon' => 'MailIcon',
-            'owner_only' => false,
-            'ability' => 'view-mail-sender',
-            'model' => MailSender::class
-        ],
-
         [
             'title' => 'settings.menu_title.expense_category',
             'group' => '',
@@ -247,6 +235,16 @@ return [
             'ability' => 'view-expense',
             'model' => Expense::class
         ],
+        [
+            'title' => 'settings.mail.mail_config',
+            'group' => '',
+            'name' => 'Mail Configuration',
+            'link' => '/admin/settings/mail-configuration',
+            'icon' => 'MailIcon',
+            'owner_only' => true,
+            'ability' => '',
+            'model' => ''
+        ],
         [
             'title' => 'settings.menu_title.file_disk',
             'group' => '',
@@ -277,7 +275,6 @@ return [
             'ability' => '',
             'model' => ''
         ],
-
     ],
 
     /*

config/installer.php

@@ -27,7 +27,6 @@ return [
             'tokenizer',
             'JSON',
             'cURL',
-            'zip',
         ],
         'apache' => [
             'mod_rewrite',

database/migrations/2023_03_10_125202_create_mail_senders_table.php

@@ -1,106 +0,0 @@
-<?php
-
-use Crater\Models\Company;
-use Crater\Models\MailSender;
-use Crater\Models\User;
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-use Silber\Bouncer\BouncerFacade;
-
-class CreateMailSendersTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::create('mail_senders', function (Blueprint $table) {
-            $table->id();
-            $table->string('name');
-            $table->string('driver');
-            $table->boolean('is_default')->default(false);
-            $table->string('bcc')->nullable();
-            $table->string('cc')->nullable();
-            $table->string('from_address')->nullable();
-            $table->string('from_name')->nullable();
-            $table->json('settings')->nullable();
-            $table->integer('company_id')->unsigned()->nullable();
-            $table->foreign('company_id')->references('id')->on('companies');
-            $table->timestamps();
-        });
-
-        $users = User::where('role', 'super admin')->get();
-
-        foreach ($users as $user) {
-            BouncerFacade::allow($user)->toManage(MailSender::class);
-        }
-
-        $companies = Company::all();
-
-        $companies->map(function ($company) {
-            if (env('MAIL_DRIVER') == 'smtp') {
-                $settings = [
-                    'MAIL_HOST' => env('MAIL_HOST'),
-                    'MAIL_PORT' => env('MAIL_PORT'),
-                    'MAIL_USERNAME' => env('MAIL_USERNAME'),
-                    'MAIL_PASSWORD' => env('MAIL_PASSWORD'),
-                    'MAIL_ENCRYPTION' => env('MAIL_ENCRYPTION')
-                ];
-                $this->createSender($settings, $company->id);
-            }
-
-            if (env('MAIL_DRIVER') == 'mail' || env('MAIL_DRIVER') == 'sendmail') {
-                $this->createSender(null, $company->id);
-            }
-
-            if (env('MAIL_DRIVER') == 'mailgun') {
-                $settings = [
-                    'MAILGUN_DOMAIN' => env('MAILGUN_DOMAIN'),
-                    'MAILGUN_SECRET' => env('MAILGUN_SECRET'),
-                    'MAILGUN_ENDPOINT' => env('MAILGUN_ENDPOINT'),
-                ];
-                $this->createSender($settings, $company->id);
-            }
-
-            if (env('MAIL_DRIVER') == 'ses') {
-                $settings = [
-                    'MAIL_HOST' => env('MAIL_HOST'),
-                    'MAIL_PORT' => env('MAIL_PORT'),
-                    'MAIL_ENCRYPTION' => env('MAIL_ENCRYPTION'),
-                    'MAILGUN_DOMAIN' => env('MAILGUN_DOMAIN'),
-                    'SES_KEY' => env('SES_KEY'),
-                    'SES_SECRET' => env('SES_SECRET'),
-                ];
-                $this->createSender($settings, $company->id);
-            }
-        });
-    }
-
-    public function createSender($settings, $company_id)
-    {
-        $data = [
-            'name' => env('MAIL_DRIVER'),
-            'driver' => env('MAIL_DRIVER'),
-            'is_default' => true,
-            'from_address' => env('MAIL_FROM_ADDRESS'),
-            'from_name' => env('MAIL_FROM_NAME'),
-            'settings' => $settings ?? null,
-            'company_id' => $company_id
-        ];
-
-        MailSender::create($data);
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        Schema::dropIfExists('mail_senders');
-    }
-}

package.json

@@ -27,7 +27,7 @@
     "vite": "^2.6.1"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.4.0",
+    "@headlessui/vue": "^1.5.0",
     "@heroicons/vue": "^1.0.1",
     "@popperjs/core": "^2.9.2",
     "@stripe/stripe-js": "^1.21.2",
@@ -48,7 +48,8 @@
     "mini-svg-data-uri": "^1.3.3",
     "moment": "^2.29.1",
     "pinia": "^2.0.4",
-    "v-money3": "^3.13.5",
+    "v-calendar": "3.0.0-alpha.8",
+    "v-money3": "3.16.1",
     "v-tooltip": "^4.0.0-alpha.1",
     "vue": "^3.2.0-beta.5",
     "vue-flatpickr-component": "^9.0.3",

resources/scripts/admin/admin-router.js

@@ -47,6 +47,8 @@ const ExpenseCategory = () =>
   import('@/scripts/admin/views/settings/ExpenseCategorySetting.vue')
 const ExchangeRateSetting = () =>
   import('@/scripts/admin/views/settings/ExchangeRateProviderSetting.vue')
+const MailConfig = () =>
+  import('@/scripts/admin/views/settings/MailConfigSetting.vue')
 const FileDisk = () =>
   import('@/scripts/admin/views/settings/FileDiskSetting.vue')
 const Backup = () => import('@/scripts/admin/views/settings/BackupSetting.vue')
@@ -54,8 +56,6 @@ const UpdateApp = () =>
   import('@/scripts/admin/views/settings/UpdateAppSetting.vue')
 const RolesSettings = () =>
   import('@/scripts/admin/views/settings/RolesSettings.vue')
-const MailSender = () =>
-  import('@/scripts/admin/views/settings/mail-sender/Index.vue')
 
 // Items
 const ItemsIndex = () => import('@/scripts/admin/views/items/Index.vue')
@@ -302,6 +302,13 @@ export default [
             meta: { ability: abilities.VIEW_EXPENSE },
             component: ExpenseCategory,
           },
+
+          {
+            path: 'mail-configuration',
+            name: 'mailconfig',
+            meta: { isOwner: true },
+            component: MailConfig,
+          },
           {
             path: 'file-disk',
             name: 'file-disk',
@@ -320,13 +327,6 @@ export default [
             meta: { isOwner: true },
             component: UpdateApp,
           },
-          {
-            path: 'mail-sender',
-            name: 'mailsender',
-            meta: { ability: abilities.VIEW_MAIL_SENDER },
-            component: MailSender,
-          },
-
         ],
       },
 

resources/scripts/admin/components/FeedbackAlert.vue

@@ -1,123 +0,0 @@
-<template>
-  <!-- warning alert -->
-  <div
-    v-if="type == 'warning'"
-    class="rounded-md p-4 m-5"
-    :class="{
-      'bg-yellow-50': type == 'warning',
-      'bg-blue-50': type == 'info',
-      'bg-red-50': type == 'error',
-      'bg-green-50': type == 'success',
-    }"
-  >
-    <div class="flex">
-      <div class="flex-shrink-0">
-        <!-- Heroicon name: solid/exclamation -->
-        <svg
-          v-if="type == 'warning'"
-          class="h-5 w-5 text-yellow-400"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-            clip-rule="evenodd"
-          />
-        </svg>
-        <!-- Heroicon name: solid/information-circle -->
-        <svg
-          v-else-if="type == 'info'"
-          class="h-5 w-5 text-blue-400"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-            clip-rule="evenodd"
-          />
-        </svg>
-        <!-- Heroicon name: solid/x-circle -->
-        <svg
-          v-else-if="type == 'error'"
-          class="h-5 w-5 text-red-400"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-            clip-rule="evenodd"
-          />
-        </svg>
-        <!-- Heroicon name: solid/check-circle -->
-        <svg
-          v-else
-          class="h-5 w-5 text-green-400"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </div>
-      <div class="ml-3">
-        <h3
-          class="text-sm font-medium"
-          :class="{
-            'text-yellow-800': type == 'warning',
-            'text-blue-800': type == 'info',
-            'text-red-800': type == 'error',
-            'text-green-800': type == 'success',
-          }"
-        >
-          {{ title }}
-        </h3>
-        <div
-          class="text-sm"
-          :class="{
-            'text-yellow-700': type == 'warning',
-            'text-blue-700': type == 'info',
-            'text-red-700': type == 'error',
-            'text-green-700': type == 'success',
-          }"
-        >
-          <p>{{ description }}</p>
-        </div>
-        <slot name="action"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  title: {
-    type: String,
-    default: null,
-    required: false,
-  },
-  description: {
-    type: String,
-    default: null,
-    required: false,
-  },
-  type: {
-    type: String,
-    default: 'success',
-    required: true,
-  },
-})
-</script>

resources/scripts/admin/components/SelectNotePopup.vue

@@ -83,25 +83,25 @@
                   @click="selectNote(index, close)"
                 >
                   <div class="flex justify-between px-2">
-                    <label
+                    <BaseLabel
                       class="
-                        m-0
+                        !m-0
-                        text-base
+                        !text-base
-                        font-semibold
+                        !font-semibold
-                        leading-tight
+                        !leading-tight
-                        text-gray-700
+                        !text-gray-700
-                        cursor-pointer
+                        !cursor-pointer
                       "
                     >
                       {{ note.name }}
-                    </label>
+                    </BaseLabel>
                   </div>
                 </div>
               </div>
               <div v-else class="flex justify-center p-5 text-gray-400">
-                <label class="text-base text-gray-500">
+                <BaseLabel class="!text-base !text-gray-500">
                   {{ $t('general.no_note_found') }}
-                </label>
+                </BaseLabel>
               </div>
             </div>
             <button
@@ -122,19 +122,18 @@
               @click="openNoteModal"
             >
               <BaseIcon name="CheckCircleIcon" class="text-primary-400" />
-              <label
+              <BaseLabel
                 class="
-                  m-0
+                  !m-0
-                  ml-3
+                  !ml-3
-                  text-sm
+                  !leading-none
-                  leading-none
+                  !cursor-pointer
-                  cursor-pointer
+                  !font-base
-                  font-base
+                  !text-primary-400
-                  text-primary-400
                 "
               >
                 {{ $t('settings.customization.notes.add_new_note') }}
-              </label>
+              </BaseLabel>
             </button>
           </div>
         </PopoverPanel>

resources/scripts/admin/components/custom-fields/CreateCustomFields.vue

@@ -64,7 +64,7 @@ function mergeExistingValues() {
   if (props.isEdit) {
     props.store[props.storeProp].fields.forEach((field) => {
       const existingIndex = props.store[props.storeProp].customFields.findIndex(
-        (f) => f.id === field.custom_field_id
+        (f) => f.id == field.custom_field_id
       )
 
       if (existingIndex > -1) {

resources/scripts/admin/components/custom-fields/types/DateTimeType.vue

@@ -9,7 +9,7 @@ import { computed } from 'vue'
 const props = defineProps({
   modelValue: {
     type: String,
-    default: moment().format('YYYY-MM-DD hh:MM'),
+    default: moment().format('YYYY-MM-DD HH:mm'),
   },
 })
 

resources/scripts/admin/components/dropdowns/MailSenderIndexDropdown.vue

@@ -1,111 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'mailsender.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
-    </template>
-
-    <!-- edit mail-sender  -->
-    <BaseDropdownItem @click="editMailSender(row.id)">
-      <BaseIcon
-        name="PencilIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
-      />
-      {{ $t('general.edit') }}
-    </BaseDropdownItem>
-
-    <!-- send test mail-sender  -->
-    <BaseDropdownItem @click="openMailSenderTestModal(row.id)">
-      <BaseIcon
-        name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
-      />
-      {{ $t('general.send_test_mail') }}
-    </BaseDropdownItem>
-
-    <!-- delete mail-sender  -->
-    <BaseDropdownItem v-if="!row.is_default" @click="removeMailSender(row.id)">
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useI18n } from 'vue-i18n'
-import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useModalStore } from '@/scripts/stores/modal'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const pre_t = 'settings.mail_sender'
-const dialogStore = useDialogStore()
-const { t } = useI18n()
-const mailSenderStore = useMailSenderStore()
-const route = useRoute()
-const modalStore = useModalStore()
-
-async function editMailSender(id) {
-  await mailSenderStore.fetchMailSender(id)
-  modalStore.openModal({
-    title: t(`${pre_t}.edit_mail_sender`),
-    componentName: 'MailSenderModal',
-    size: 'md',
-    refreshData: props.loadData && props.loadData,
-  })
-}
-
-function removeMailSender(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t(`${pre_t}.confirm_delete`),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        let response = await mailSenderStore.deleteMailSender(id)
-        if (response.data.success) {
-          props.loadData && props.loadData()
-          return true
-        }
-        props.loadData && props.loadData()
-      }
-    })
-}
-
-async function openMailSenderTestModal(id) {
-  modalStore.openModal({
-    title: t(`general.send_test_mail`),
-    componentName: 'MailSenderTestModal',
-    size: 'md',
-    id: id,
-    refreshData: props.loadData && props.loadData,
-  })
-}
-</script>

resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex items-center justify-between mb-3">
     <div class="flex items-center text-base" style="flex: 4">
-      <label class="pr-2 mb-0" align="right">
+      <BaseLabel class="!pr-2 !mb-0" align="right">
         {{ $t('invoices.item.tax') }}
-      </label>
+      </BaseLabel>
 
       <BaseMultiselect
         v-model="selectedTax"
@@ -35,9 +35,9 @@
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
 
-            <label
+            <BaseLabel
-              class="ml-2 text-sm leading-none cursor-pointer text-primary-400"
+              class="!ml-2 !leading-none !cursor-pointer !text-primary-400"
-              >{{ $t('invoices.add_new_tax') }}</label
+              >{{ $t('invoices.add_new_tax') }}</BaseLabel
             >
           </button>
         </template>

resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue

@@ -5,9 +5,9 @@
     >
       <SelectNotePopup :type="type" @select="onSelectNote" />
     </div>
-    <label class="text-gray-800 font-medium mb-4 text-sm">
+    <BaseLabel class="!text-gray-800 !mb-4 ">
       {{ $t('invoices.notes') }}
-    </label>
+    </BaseLabel>
     <BaseCustomInput
       v-model="store[storeProp].notes"
       :content-loading="store.isFetchingInitialSettings"

resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue

@@ -16,12 +16,12 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="!font-semibold  !text-gray-400 !uppercase"
       >
         {{ $t('estimates.sub_total') }}
-      </label>
+      </BaseLabel>
 
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
@@ -29,7 +29,7 @@
 
       <label
         v-else
-        class="flex items-center justify-center m-0 text-lg text-black uppercase "
+        class="flex items-center justify-center m-0 text-lg text-black  dark:text-white uppercase "
       >
         <BaseFormatMoney
           :amount="store.getSubTotal"
@@ -48,7 +48,7 @@
       </BaseContentPlaceholders>
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
+        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase dark:text-gray-400"
       >
         {{ tax.name }} - {{ tax.percent }}%
       </label>
@@ -59,7 +59,7 @@
 
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="flex items-center justify-center m-0 text-lg text-black uppercase "
+        class="flex items-center justify-center m-0 text-lg text-black dark:text-white uppercase "
       >
         <BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
       </label>
@@ -75,12 +75,12 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class=" !font-semibold  !text-gray-400 !uppercase"
       >
         {{ $t('estimates.discount') }}
-      </label>
+      </BaseLabel>
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText
           :lines="1"
@@ -171,21 +171,21 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="!m-0 !font-semibold  !text-gray-400 !uppercase"
-        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
+        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</BaseLabel
       >
 
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="flex items-center justify-center text-lg uppercase  text-primary-400"
+        class="!flex !items-center !justify-center !text-lg !uppercase  !text-primary-400"
       >
         <BaseFormatMoney :amount="store.getTotal" :currency="defaultCurrency" />
-      </label>
+      </BaseLabel>
     </div>
   </div>
 </template>

resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <label class="font-semibold leading-5 text-gray-500 uppercase">
+    <BaseLabel class="!font-semibold  !text-gray-500 !uppercase">
       {{ tax.name }} ({{ tax.percent }} %)
-    </label>
+    </BaseLabel>
-    <label class="flex items-center justify-center text-lg text-black">
+    <label class="flex items-center justify-center text-lg text-black dark:text-white">
       <BaseFormatMoney :amount="tax.amount" :currency="currency" />
 
       <BaseIcon

resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue

@@ -88,38 +88,37 @@
                     @click="selectTaxType(taxType, close)"
                   >
                     <div class="flex justify-between px-2">
-                      <label
+                      <BaseLabel
                         class="
-                          m-0
+                          !m-0
-                          text-base
+                          !text-base
-                          font-semibold
+                          !font-semibold
-                          leading-tight
+                          !leading-tight
-                          text-gray-700
+                          !cursor-pointer
-                          cursor-pointer
                         "
                       >
                         {{ taxType.name }}
-                      </label>
+                      </BaseLabel>
 
-                      <label
+                      <BaseLabel
                         class="
-                          m-0
+                          !m-0
-                          text-base
+                          !text-base
-                          font-semibold
+                          !font-semibold
-                          text-gray-700
+                          !text-gray-700
-                          cursor-pointer
+                          !cursor-pointer
                         "
                       >
                         {{ taxType.percent }} %
-                      </label>
+                      </BaseLabel>
                     </div>
                   </div>
                 </div>
 
                 <div v-else class="flex justify-center p-5 text-gray-400">
-                  <label class="text-base text-gray-500 cursor-pointer">
+                  <BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
                     {{ $t('general.no_tax_found') }}
-                  </label>
+                  </BaseLabel>
                 </div>
               </div>
 
@@ -142,19 +141,18 @@
                 @click="openTaxTypeModal"
               >
                 <BaseIcon name="CheckCircleIcon" class="text-primary-400" />
-                <label
+                <BaseLabel
                   class="
-                    m-0
+                    !m-0
-                    ml-3
+                    !ml-3
-                    text-sm
+                    !leading-none
-                    leading-none
+                    !cursor-pointer
-                    cursor-pointer
+                    !font-base
-                    font-base
+                    !text-primary-400
-                    text-primary-400
                   "
                 >
                   {{ $t('estimates.add_new_tax') }}
-                </label>
+                </BaseLabel>
               </button>
             </div>
           </PopoverPanel>

resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <label class="flex text-gray-800 font-medium text-sm mb-2">
+    <BaseLabel class="!flex !text-gray-800 !mb-2">
       {{ $t('general.select_template') }}
       <span class="text-sm text-red-500"> *</span>
-    </label>
+    </BaseLabel>
     <BaseButton
       type="button"
       class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"

resources/scripts/admin/components/modal-components/CompanyModal.vue

@@ -48,6 +48,24 @@
             />
           </BaseInputGroup>
 
+          <BaseInputGroup
+            :label="$tc('settings.company_info.company_slug')"
+            :help-text="$t('settings.company_info.company_slug_help_text')"
+            :error="
+              v$.newCompanyForm.slug.$error &&
+              v$.newCompanyForm.slug.$errors[0].$message
+            "
+            :content-loading="isFetchingInitialData"
+            required
+          >
+            <BaseInput
+              v-model="newCompanyForm.slug"
+              :invalid="v$.newCompanyForm.slug.$error"
+              :content-loading="isFetchingInitialData"
+              @input="v$.newCompanyForm.slug.$touch()"
+            />
+          </BaseInputGroup>
+
           <BaseInputGroup
             :content-loading="isFetchingInitialData"
             :label="$tc('settings.company_info.country')"
@@ -130,7 +148,7 @@
 
 <script setup>
 import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onMounted, ref, reactive } from 'vue'
+import { computed, onMounted, ref, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { required, minLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
@@ -152,6 +170,7 @@ let companyLogoName = ref(null)
 
 const newCompanyForm = reactive({
   name: null,
+  slug: null,
   currency: '',
   address: {
     country_id: null,
@@ -162,6 +181,9 @@ const modalActive = computed(() => {
   return modalStore.active && modalStore.componentName === 'CompanyModal'
 })
 
+const slugValidator = (value) => {
+  return value == slugify(value)
+}
 const rules = {
   newCompanyForm: {
     name: {
@@ -171,6 +193,17 @@ const rules = {
         minLength(3)
       ),
     },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+      slugValidator: helpers.withMessage(
+        t('validation.invalid_slug'),
+        slugValidator
+      ),
+    },
     address: {
       country_id: {
         required: helpers.withMessage(t('validation.required'), required),
@@ -243,6 +276,7 @@ async function submitCompanyData() {
 
 function resetNewCompanyForm() {
   newCompanyForm.name = ''
+  newCompanyForm.slug = ''
   newCompanyForm.currency = ''
   newCompanyForm.address.country_id = ''
 
@@ -257,4 +291,24 @@ function closeCompanyModal() {
     v$.value.$reset()
   }, 300)
 }
+
+// watcher for if change company name then auto fill company slug value
+watch(
+  () => newCompanyForm.name,
+  (currentValue) => {
+    newCompanyForm.slug = slugify(currentValue)
+  }
+)
+
+function slugify(string) {
+  return string
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
 </script>

resources/scripts/admin/components/modal-components/CustomerModal.vue

@@ -453,7 +453,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
@@ -549,6 +549,7 @@ const rules = computed(() => {
     website: {
       url: helpers.withMessage(t('validation.invalid_url'), url),
     },
+
     billing: {
       address_street_1: {
         maxLength: helpers.withMessage(

resources/scripts/admin/components/modal-components/MailSenderModal.vue

@@ -1,287 +0,0 @@
-<template>
-  <BaseModal
-    :show="modalStore.active && modalStore.componentName === 'MailSenderModal'"
-  >
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XIcon"
-          class="h-6 w-6 text-gray-500 cursor-pointer"
-          @click="closeMailSenderModal"
-        />
-      </div>
-    </template>
-    <form action="" @submit.prevent="submitMailSenderData">
-      <div class="p-4 sm:p-6 my-2">
-        <!-- Name -->
-        <BaseInputGrid>
-          <BaseInputGroup
-            :label="$t(`${pre_t}.name`)"
-            :error="v$.name.$error && v$.name.$errors[0].$message"
-            :help-text="$t(`${pre_t}.name_help`)"
-            required
-          >
-            <BaseInput
-              v-model.trim="mailSenderStore.currentMailSender.name"
-              :invalid="v$.name.$error"
-              type="text"
-              @input="v$.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- From Name -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.from_name`)"
-            :error="v$.from_name.$error && v$.from_name.$errors[0].$message"
-            required
-          >
-            <BaseInput
-              v-model="mailSenderStore.currentMailSender.from_name"
-              :invalid="v$.from_name.$error"
-              type="text"
-              @input="v$.from_name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- From Address -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.from_address`)"
-            :error="
-              v$.from_address.$error && v$.from_address.$errors[0].$message
-            "
-            required
-          >
-            <BaseInput
-              v-model="mailSenderStore.currentMailSender.from_address"
-              :invalid="v$.from_address.$error"
-              type="text"
-              @input="v$.from_address.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- CC -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.cc`)"
-            :error="v$.cc.$error && v$.cc.$errors[0].$message"
-            :help-text="$t(`${pre_t}.email_list`)"
-          >
-            <BaseInput
-              v-model="mailSenderStore.currentMailSender.cc"
-              :invalid="v$.cc.$error"
-              type="text"
-              @input="v$.cc.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- BCC -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.bcc`)"
-            :error="v$.bcc.$error && v$.bcc.$errors[0].$message"
-            :help-text="$t(`${pre_t}.email_list`)"
-          >
-            <BaseInput
-              v-model="mailSenderStore.currentMailSender.bcc"
-              :invalid="v$.bcc.$error"
-              type="text"
-              @input="v$.bcc.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- Mail Driver -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.driver`)"
-            :error="v$.driver.$error && v$.driver.$errors[0].$message"
-            required
-          >
-            <BaseMultiselect
-              v-model="mailSenderStore.currentMailSender.driver"
-              :options="mailSenderStore.mail_drivers"
-              :can-deselect="false"
-              :invalid="v$.driver.$error"
-            />
-          </BaseInputGroup>
-
-          <component
-            :is="loadMailDriver"
-            :mail-sender-store="mailSenderStore"
-          />
-        </BaseInputGrid>
-
-        <BaseDivider class="mt-4 mb-0" />
-
-        <!-- Is Default? -->
-        <BaseSwitchSection
-          v-if="!mailSenderStore.isDisable"
-          v-model="mailSenderStore.currentMailSender.is_default"
-          :title="$t(`${pre_t}.is_default`)"
-          :description="$t(`${pre_t}.is_default_description`)"
-        />
-      </div>
-
-      <div
-        class="z-0 flex justify-end p-4 border-t border-solid border--200 border-modal-bg"
-      >
-        <BaseButton
-          class="mr-3 text-sm"
-          variant="primary-outline"
-          type="button"
-          @click="closeMailSenderModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="SaveIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{
-            mailSenderStore.isEdit ? $t('general.update') : $t('general.save')
-          }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, email, minLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
-import SmtpDriver from '@/scripts/admin/views/settings/mail-sender/SmtpDriver.vue'
-import MailgunDriver from '@/scripts/admin/views/settings/mail-sender/MailgunDriver.vue'
-import SesDriver from '@/scripts/admin/views/settings/mail-sender/SesDriver.vue'
-
-const pre_t = 'settings.mail_sender'
-const modalStore = useModalStore()
-const mailSenderStore = useMailSenderStore()
-const { t } = useI18n()
-let isSaving = ref(false)
-
-const loadMailDriver = computed(() => {
-  switch (mailSenderStore.currentMailSender.driver) {
-    case 'smtp':
-      return SmtpDriver
-    case 'mail':
-      return false
-    case 'sendmail':
-      return false
-    case 'mailgun':
-      return MailgunDriver
-    case 'ses':
-      return SesDriver
-    default:
-      return false
-  }
-})
-
-// This is multiple email custom validation
-const multiEmail = (value) => {
-  if (value == '' || value === null) return true
-  const emailRegex =
-    /^(?:[A-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i
-
-  const emailArr = value.split(',')
-  let isValid = emailArr.every((v) => {
-    return emailRegex.test(v)
-  })
-  return isValid
-}
-
-const rules = computed(() => {
-  return {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.name_min_length', { count: 3 }),
-        minLength(3)
-      ),
-    },
-    from_name: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    from_address: {
-      required: helpers.withMessage(t('validation.required'), required),
-      email: helpers.withMessage(t('validation.email_incorrect'), email),
-    },
-    cc: {
-      multiEmail: helpers.withMessage(
-        t('validation.email_incorrect'),
-        multiEmail
-      ),
-    },
-    bcc: {
-      multiEmail: helpers.withMessage(
-        t('validation.email_incorrect'),
-        multiEmail
-      ),
-    },
-    driver: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailSenderStore.currentMailSender)
-)
-
-async function submitMailSenderData() {
-  v$.value.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-  try {
-    const action = mailSenderStore.isEdit
-      ? mailSenderStore.updateMailSender
-      : mailSenderStore.addMailSender
-    isSaving.value = true
-
-    var mailDriverConfig = null
-    switch (mailSenderStore.currentMailSender.driver) {
-      case 'smtp':
-        mailDriverConfig = mailSenderStore.smtpConfig
-        break
-      case 'mailgun':
-        mailDriverConfig = mailSenderStore.mailgunConfig
-        break
-      case 'ses':
-        mailDriverConfig = mailSenderStore.sesConfig
-        break
-    }
-    mailSenderStore.currentMailSender.settings = mailDriverConfig
-
-    let res = await action(mailSenderStore.currentMailSender)
-    isSaving.value = false
-    modalStore.refreshData ? modalStore.refreshData(res.data.data) : ''
-    closeMailSenderModal()
-  } catch (err) {
-    isSaving.value = false
-    return true
-  }
-}
-
-function closeMailSenderModal() {
-  modalStore.closeModal()
-  setTimeout(() => {
-    mailSenderStore.resetCurrentMailSender()
-    v$.value.$reset()
-  }, 300)
-}
-
-onMounted(async () => {
-  await mailSenderStore.fetchMailDrivers()
-})
-</script>

resources/scripts/admin/components/modal-components/MailSenderTestModal.vue

@@ -1,208 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @open="setInitialData">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XIcon"
-          class="w-6 h-6 text-gray-500 cursor-pointer"
-          @click="closeTestModal"
-        />
-      </div>
-    </template>
-    <form action="" @submit.prevent="onTestMailSend">
-      <div class="p-4 md:p-8">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t(`${pre_t}.title`)"
-            variant="horizontal"
-            :content-loading="isFetchingInitialData"
-            :error="
-              v$.mail_sender_id.$error && v$.mail_sender_id.$errors[0].$message
-            "
-          >
-            <BaseMultiselect
-              v-model="formData.mail_sender_id"
-              :invalid="v$.mail_sender_id.$error"
-              label="name"
-              :options="mailSenderStore.mailSenders"
-              value-prop="id"
-              :can-deselect="false"
-              :can-clear="false"
-              :placeholder="$t(`${pre_t}.select_mail_sender`)"
-              searchable
-              track-by="name"
-              :content-loading="isFetchingInitialData"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('general.to')"
-            :error="v$.to.$error && v$.to.$errors[0].$message"
-            variant="horizontal"
-            required
-            :content-loading="isFetchingInitialData"
-          >
-            <BaseInput
-              v-model="formData.to"
-              type="text"
-              :invalid="v$.to.$error"
-              :content-loading="isFetchingInitialData"
-              @input="v$.to.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.subject')"
-            :error="v$.subject.$error && v$.subject.$errors[0].$message"
-            variant="horizontal"
-            required
-            :content-loading="isFetchingInitialData"
-          >
-            <BaseInput
-              v-model="formData.subject"
-              type="text"
-              :invalid="v$.subject.$error"
-              :content-loading="isFetchingInitialData"
-              @input="v$.subject.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.message')"
-            :error="v$.message.$error && v$.message.$errors[0].$message"
-            variant="horizontal"
-            required
-            :content-loading="isFetchingInitialData"
-          >
-            <BaseTextarea
-              v-model="formData.message"
-              rows="4"
-              cols="50"
-              :invalid="v$.message.$error"
-              :content-loading="isFetchingInitialData"
-              @input="v$.message.$touch()"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
-        <BaseButton
-          variant="primary-outline"
-          type="button"
-          class="mr-3"
-          :content-loading="isFetchingInitialData"
-          @click="closeTestModal()"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isSaving"
-          variant="primary"
-          type="submit"
-          :content-loading="isFetchingInitialData"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="PaperAirplaneIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('general.send') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { reactive, ref, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, email, maxLength, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
-
-const pre_t = 'settings.mail_sender'
-const modalStore = useModalStore()
-const mailSenderStore = useMailSenderStore()
-const { t } = useI18n()
-let isSaving = ref(false)
-let formData = reactive({
-  mail_sender_id: '',
-  to: '',
-  subject: '',
-  message: '',
-})
-const isFetchingInitialData = ref(false)
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'MailSenderTestModal'
-})
-
-function setInitialData() {
-  isFetchingInitialData.value = true
-  formData.mail_sender_id = modalStore.id
-  setTimeout(() => {
-    isFetchingInitialData.value = false
-  }, 100)
-}
-
-const rules = {
-  mail_sender_id: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  to: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  subject: {
-    required: helpers.withMessage(t('validation.required'), required),
-    maxLength: helpers.withMessage(
-      t('validation.subject_maxlength'),
-      maxLength(100)
-    ),
-  },
-  message: {
-    required: helpers.withMessage(t('validation.required'), required),
-    maxLength: helpers.withMessage(
-      t('validation.message_maxlength'),
-      maxLength(255)
-    ),
-  },
-}
-
-const v$ = useVuelidate(rules, formData)
-
-function resetFormData() {
-  formData.mail_sender_id = ''
-  formData.to = ''
-  formData.subject = ''
-  formData.message = ''
-
-  v$.value.$reset()
-}
-
-async function onTestMailSend() {
-  v$.value.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-  let response = await mailSenderStore.sendTestMail(formData)
-  if (response.data) {
-    closeTestModal()
-  }
-}
-function closeTestModal() {
-  modalStore.closeModal()
-  setTimeout(() => {
-    isSaving.value = false
-    modalStore.resetModalData()
-    resetFormData()
-  }, 300)
-}
-</script>

resources/scripts/admin/components/modal-components/SendEstimateModal.vue

@@ -16,28 +16,18 @@
     </template>
 
     <form v-if="!isPreview" action="">
-      <!-- v-if -->
+      <div class="px-8 py-8 sm:p-6">
-      <div v-if="isMailSenderExist" class="px-8 py-8 sm:p-6">
         <BaseInputGrid layout="one-column">
           <BaseInputGroup
-            :label="$tc('settings.mail_sender.title', 1)"
+            :label="$t('general.from')"
             required
-            :error="
+            :error="v$.from.$error && v$.from.$errors[0].$message"
-              v$.mail_sender_id.$error && v$.mail_sender_id.$errors[0].$message
-            "
           >
-            <BaseMultiselect
+            <BaseInput
-              v-model="estimateMailForm.mail_sender_id"
+              v-model="estimateMailForm.from"
-              :invalid="v$.mail_sender_id.$error"
+              type="text"
-              label="name"
+              :invalid="v$.from.$error"
-              :options="mailSenders"
+              @input="v$.from.$touch()"
-              value-prop="id"
-              :can-deselect="false"
-              :can-clear="false"
-              :placeholder="$t(`settings.mail_sender.select_mail_sender`)"
-              searchable
-              track-by="name"
-              :content-loading="isFetchingInitialData"
             />
           </BaseInputGroup>
           <BaseInputGroup
@@ -72,45 +62,6 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <!-- v-else -->
-      <div v-else-if="!isMailSenderExist && !isFetchingInitialData">
-        <FeedbackAlert
-          :title="$t('settings.mail_sender.no_mail_sender_found')"
-          :description="
-            $t('settings.mail_sender.no_mail_sender_found_description')
-          "
-          type="warning"
-        >
-          <template #action>
-            <div class="mt-4">
-              <div class="-mx-2 -my-1.5 flex">
-                <button
-                  type="button"
-                  class="
-                    bg-yellow-50
-                    px-2
-                    py-1.5
-                    rounded-md
-                    text-sm
-                    font-medium
-                    text-yellow-800
-                    hover:bg-yellow-100
-                    focus:outline-none
-                    focus:ring-2
-                    focus:ring-offset-2
-                    focus:ring-offset-yellow-50
-                    focus:ring-yellow-600
-                  "
-                  @click="gotoMailSender"
-                >
-                  {{ $t('settings.mail_sender.manage_mail_sender') }}
-                </button>
-              </div>
-            </div>
-          </template>
-        </FeedbackAlert>
-      </div>
-      <!-- end v-if-else -->
       <div
         class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
       >
@@ -124,7 +75,6 @@
         </BaseButton>
 
         <BaseButton
-          v-if="isMailSenderExist"
           :loading="isLoading"
           :disabled="isLoading"
           variant="primary"
@@ -191,24 +141,18 @@ import { useModalStore } from '@/scripts/stores/modal'
 import { useEstimateStore } from '@/scripts/admin/stores/estimate'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
+import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import FeedbackAlert from '@/scripts/admin/components/FeedbackAlert.vue'
-import { useRouter } from 'vue-router'
 
 const modalStore = useModalStore()
 const estimateStore = useEstimateStore()
 const notificationStore = useNotificationStore()
 const companyStore = useCompanyStore()
-const mailSenderStore = useMailSenderStore()
+const mailDriverStore = useMailDriverStore()
-const router = useRouter()
 
 const { t } = useI18n()
 const isLoading = ref(false)
 const templateUrl = ref('')
 const isPreview = ref(false)
-const mailSenders = ref(null)
-const isFetchingInitialData = ref(false)
-const emailTemplates = ref(null)
 
 const estimateMailFields = ref([
   'customer',
@@ -220,7 +164,7 @@ const estimateMailFields = ref([
 
 let estimateMailForm = reactive({
   id: null,
-  mail_sender_id: null,
+  from: null,
   to: null,
   subject: 'New Estimate',
   body: null,
@@ -237,8 +181,9 @@ const modalData = computed(() => {
 })
 
 const rules = {
-  mail_sender_id: {
+  from: {
     required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
   },
   to: {
     required: helpers.withMessage(t('validation.required'), required),
@@ -262,26 +207,20 @@ function cancelPreview() {
 }
 
 async function setInitialData() {
+  let admin = await companyStore.fetchBasicMailConfig()
+
   estimateMailForm.id = modalStore.id
+
+  if (admin.data) {
+    estimateMailForm.from = admin.data.from_mail
+  }
+
   if (modalData.value) {
     estimateMailForm.to = modalData.value.customer.email
   }
 
   estimateMailForm.body =
     companyStore.selectedCompanySettings.estimate_mail_body
-
-  isFetchingInitialData.value = true
-  let mailSenderData = await mailSenderStore.fetchMailSenders({ limit: 'all' })
-  if (mailSenderData.data) {
-    mailSenders.value = mailSenderData.data.data
-    let defaultMailSender = mailSenderData.data.data.find(
-      (mailSender) => mailSender.is_default == true
-    )
-    estimateMailForm.mail_sender_id = defaultMailSender
-      ? defaultMailSender.id
-      : null
-    isFetchingInitialData.value = false
-  }
 }
 
 async function submitForm() {
@@ -335,18 +274,4 @@ function closeSendEstimateModal() {
     templateUrl.value = null
   }, 300)
 }
-
-function getTickImage() {
-  const imgUrl = new URL('/img/tick.png', import.meta.url)
-  return imgUrl
-}
-
-const isMailSenderExist = computed(() => {
-  return mailSenders.value && mailSenders.value.length
-})
-
-function gotoMailSender() {
-  closeSendEstimateModal()
-  router.push('/admin/settings/mail-sender')
-}
 </script>

resources/scripts/admin/components/modal-components/SendInvoiceModal.vue

@@ -15,28 +15,18 @@
       </div>
     </template>
     <form v-if="!isPreview" action="">
-      <!-- v-if -->
+      <div class="px-8 py-8 sm:p-6">
-      <div v-if="isMailSenderExist" class="px-8 py-8 sm:p-6">
         <BaseInputGrid layout="one-column" class="col-span-7">
           <BaseInputGroup
-            :label="$tc('settings.mail_sender.title', 1)"
+            :label="$t('general.from')"
             required
-            :error="
+            :error="v$.from.$error && v$.from.$errors[0].$message"
-              v$.mail_sender_id.$error && v$.mail_sender_id.$errors[0].$message
-            "
           >
-            <BaseMultiselect
+            <BaseInput
-              v-model="invoiceMailForm.mail_sender_id"
+              v-model="invoiceMailForm.from"
-              :invalid="v$.mail_sender_id.$error"
+              type="text"
-              label="name"
+              :invalid="v$.from.$error"
-              :options="mailSenders"
+              @input="v$.from.$touch()"
-              value-prop="id"
-              :can-deselect="false"
-              :can-clear="false"
-              :placeholder="$t(`settings.mail_sender.select_mail_sender`)"
-              searchable
-              track-by="name"
-              :content-loading="isFetchingInitialData"
             />
           </BaseInputGroup>
           <BaseInputGroup
@@ -75,45 +65,6 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <!-- v-else -->
-      <div v-else-if="!isMailSenderExist && !isFetchingInitialData">
-        <FeedbackAlert
-          :title="$t('settings.mail_sender.no_mail_sender_found')"
-          :description="
-            $t('settings.mail_sender.no_mail_sender_found_description')
-          "
-          type="warning"
-        >
-          <template #action>
-            <div class="mt-4">
-              <div class="-mx-2 -my-1.5 flex">
-                <button
-                  type="button"
-                  class="
-                    bg-yellow-50
-                    px-2
-                    py-1.5
-                    rounded-md
-                    text-sm
-                    font-medium
-                    text-yellow-800
-                    hover:bg-yellow-100
-                    focus:outline-none
-                    focus:ring-2
-                    focus:ring-offset-2
-                    focus:ring-offset-yellow-50
-                    focus:ring-yellow-600
-                  "
-                  @click="gotoMailSender"
-                >
-                  {{ $t('settings.mail_sender.manage_mail_sender') }}
-                </button>
-              </div>
-            </div>
-          </template>
-        </FeedbackAlert>
-      </div>
-      <!-- end v-if-else -->
       <div
         class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
       >
@@ -126,7 +77,6 @@
           {{ $t('general.cancel') }}
         </BaseButton>
         <BaseButton
-          v-if="isMailSenderExist"
           :loading="isLoading"
           :disabled="isLoading"
           variant="primary"
@@ -204,24 +154,18 @@ import { useI18n } from 'vue-i18n'
 import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
 import { useVuelidate } from '@vuelidate/core'
 import { required, email, helpers } from '@vuelidate/validators'
-import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
+import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import FeedbackAlert from '@/scripts/admin/components/FeedbackAlert.vue'
-import { useRouter } from 'vue-router'
 
 const modalStore = useModalStore()
 const companyStore = useCompanyStore()
 const notificationStore = useNotificationStore()
 const invoiceStore = useInvoiceStore()
-const mailSenderStore = useMailSenderStore()
+const mailDriverStore = useMailDriverStore()
-const router = useRouter()
 
 const { t } = useI18n()
 let isLoading = ref(false)
 const templateUrl = ref('')
 const isPreview = ref(false)
-const mailSenders = ref(null)
-const isFetchingInitialData = ref(false)
-const emailTemplates = ref(null)
 
 const emit = defineEmits(['update'])
 
@@ -235,7 +179,7 @@ const invoiceMailFields = ref([
 
 const invoiceMailForm = reactive({
   id: null,
-  mail_sender_id: null,
+  from: null,
   to: null,
   subject: 'New Invoice',
   body: null,
@@ -254,8 +198,9 @@ const modalData = computed(() => {
 })
 
 const rules = {
-  mail_sender_id: {
+  from: {
     required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
   },
   to: {
     required: helpers.withMessage(t('validation.required'), required),
@@ -279,25 +224,19 @@ function cancelPreview() {
 }
 
 async function setInitialData() {
+  let admin = await companyStore.fetchBasicMailConfig()
+
   invoiceMailForm.id = modalStore.id
+
+  if (admin.data) {
+    invoiceMailForm.from = admin.data.from_mail
+  }
+
   if (modalData.value) {
     invoiceMailForm.to = modalData.value.customer.email
   }
 
   invoiceMailForm.body = companyStore.selectedCompanySettings.invoice_mail_body
-
-  isFetchingInitialData.value = true
-  let mailSenderData = await mailSenderStore.fetchMailSenders({ limit: 'all' })
-  if (mailSenderData.data) {
-    mailSenders.value = mailSenderData.data.data
-    let defaultMailSender = mailSenderData.data.data.find(
-      (mailSender) => mailSender.is_default == true
-    )
-    invoiceMailForm.mail_sender_id = defaultMailSender
-      ? defaultMailSender.id
-      : null
-    isFetchingInitialData.value = false
-  }
 }
 
 async function submitForm() {
@@ -348,18 +287,4 @@ function closeSendInvoiceModal() {
     templateUrl.value = null
   }, 300)
 }
-
-function getTickImage() {
-  const imgUrl = new URL('/img/tick.png', import.meta.url)
-  return imgUrl
-}
-
-const isMailSenderExist = computed(() => {
-  return mailSenders.value && mailSenders.value.length
-})
-
-function gotoMailSender() {
-  closeSendInvoiceModal()
-  router.push('/admin/settings/mail-sender')
-}
 </script>

resources/scripts/admin/components/modal-components/SendPaymentModal.vue

@@ -15,28 +15,18 @@
       </div>
     </template>
     <form v-if="!isPreview" action="">
-      <!-- v-if -->
+      <div class="px-8 py-8 sm:p-6">
-      <div v-if="isMailSenderExist" class="px-8 py-8 sm:p-6">
         <BaseInputGrid layout="one-column" class="col-span-7">
           <BaseInputGroup
-            :label="$tc('settings.mail_sender.title', 1)"
+            :label="$t('general.from')"
             required
-            :error="
+            :error="v$.from.$error && v$.from.$errors[0].$message"
-              v$.mail_sender_id.$error && v$.mail_sender_id.$errors[0].$message
-            "
           >
-            <BaseMultiselect
+            <BaseInput
-              v-model="paymentMailForm.mail_sender_id"
+              v-model="paymentMailForm.from"
-              :invalid="v$.mail_sender_id.$error"
+              type="text"
-              label="name"
+              :invalid="v$.from.$error"
-              :options="mailSenders"
+              @input="v$.from.$touch()"
-              value-prop="id"
-              :can-deselect="false"
-              :can-clear="false"
-              :placeholder="$t(`settings.mail_sender.select_mail_sender`)"
-              searchable
-              track-by="name"
-              :content-loading="isFetchingInitialData"
             />
           </BaseInputGroup>
           <BaseInputGroup
@@ -75,45 +65,6 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <!-- v-else -->
-      <div v-else-if="!isMailSenderExist && !isFetchingInitialData">
-        <FeedbackAlert
-          :title="$t('settings.mail_sender.no_mail_sender_found')"
-          :description="
-            $t('settings.mail_sender.no_mail_sender_found_description')
-          "
-          type="warning"
-        >
-          <template #action>
-            <div class="mt-4">
-              <div class="-mx-2 -my-1.5 flex">
-                <button
-                  type="button"
-                  class="
-                    bg-yellow-50
-                    px-2
-                    py-1.5
-                    rounded-md
-                    text-sm
-                    font-medium
-                    text-yellow-800
-                    hover:bg-yellow-100
-                    focus:outline-none
-                    focus:ring-2
-                    focus:ring-offset-2
-                    focus:ring-offset-yellow-50
-                    focus:ring-yellow-600
-                  "
-                  @click="gotoMailSender"
-                >
-                  {{ $t('settings.mail_sender.manage_mail_sender') }}
-                </button>
-              </div>
-            </div>
-          </template>
-        </FeedbackAlert>
-      </div>
-      <!-- end v-if-else -->
       <div
         class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
       >
@@ -126,7 +77,6 @@
           {{ $t('general.cancel') }}
         </BaseButton>
         <BaseButton
-          v-if="isMailSenderExist"
           :loading="isLoading"
           :disabled="isLoading"
           variant="primary"
@@ -204,26 +154,20 @@ import { usePaymentStore } from '@/scripts/admin/stores/payment'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useNotificationStore } from '@/scripts/stores/notification'
 import { useModalStore } from '@/scripts/stores/modal'
+import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
 import { useDialogStore } from '@/scripts/stores/dialog'
-import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
-import FeedbackAlert from '@/scripts/admin/components/FeedbackAlert.vue'
-import { useRouter } from 'vue-router'
 
 const paymentStore = usePaymentStore()
 const companyStore = useCompanyStore()
 const modalStore = useModalStore()
 const notificationStore = useNotificationStore()
+const mailDriversStore = useMailDriverStore()
 const dialogStore = useDialogStore()
-const mailSenderStore = useMailSenderStore()
-const router = useRouter()
 
 const { t } = useI18n()
 let isLoading = ref(false)
 const templateUrl = ref('')
 const isPreview = ref(false)
-const mailSenders = ref(null)
-const isFetchingInitialData = ref(false)
-const emailTemplates = ref(null)
 
 const paymentMailFields = ref([
   'customer',
@@ -235,7 +179,7 @@ const paymentMailFields = ref([
 
 const paymentMailForm = reactive({
   id: null,
-  mail_sender_id: null,
+  from: null,
   to: null,
   subject: 'New Payment',
   body: null,
@@ -254,8 +198,9 @@ const modalData = computed(() => {
 })
 
 const rules = {
-  mail_sender_id: {
+  from: {
     required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
   },
   to: {
     required: helpers.withMessage(t('validation.required'), required),
@@ -276,25 +221,18 @@ function cancelPreview() {
 }
 
 async function setInitialData() {
+  let admin = await companyStore.fetchBasicMailConfig()
   paymentMailForm.id = modalStore.id
+
+  if (admin.data) {
+    paymentMailForm.from = admin.data.from_mail
+  }
+
   if (modalData.value) {
     paymentMailForm.to = modalData.value.customer.email
   }
 
   paymentMailForm.body = companyStore.selectedCompanySettings.payment_mail_body
-
-  isFetchingInitialData.value = true
-  let mailSenderData = await mailSenderStore.fetchMailSenders({ limit: 'all' })
-  if (mailSenderData.data) {
-    mailSenders.value = mailSenderData.data.data
-    let defaultMailSender = mailSenderData.data.data.find(
-      (mailSender) => mailSender.is_default == true
-    )
-    paymentMailForm.mail_sender_id = defaultMailSender
-      ? defaultMailSender.id
-      : null
-    isFetchingInitialData.value = false
-  }
 }
 
 async function sendPaymentData() {
@@ -342,18 +280,4 @@ function closeSendPaymentModal() {
     modalStore.resetModalData()
   }, 300)
 }
-
-function getTickImage() {
-  const imgUrl = new URL('/img/tick.png', import.meta.url)
-  return imgUrl
-}
-
-const isMailSenderExist = computed(() => {
-  return mailSenders.value && mailSenders.value.length
-})
-
-function gotoMailSender() {
-  closeSendPaymentModal()
-  router.push('/admin/settings/mail-sender')
-}
 </script>

resources/scripts/admin/layouts/partials/TheSiteHeader.vue

@@ -15,6 +15,13 @@
       bg-gradient-to-r
       from-primary-500
       to-primary-400
+      dark:from-gray-700/70 dark:to-gray-800/70
+      bg-primary-500
+      dark:bg-transparent
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
     "
   >
     <router-link
@@ -53,6 +60,7 @@
         cursor-pointer
         md:hidden md:ml-0
         hover:bg-gray-100
+        dark:bg-gray-800 dark:border-gray-500 dark:border
       "
       @click.prevent="onToggle"
     >

resources/scripts/admin/layouts/partials/TheSiteSidebar.vue

@@ -15,7 +15,9 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+        <DialogOverlay
+          class="fixed inset-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900/90"
+        />
       </TransitionChild>
 
       <TransitionChild
@@ -27,7 +29,9 @@
         leave-from="translate-x-0"
         leave-to="-translate-x-full"
       >
-        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
+        <div
+          class="relative flex flex-col flex-1 w-full max-w-xs bg-white dark:bg-gray-800"
+        >
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -40,18 +44,17 @@
             <div class="absolute top-0 right-0 pt-2 -mr-12">
               <button
                 class="
-                  flex
+                flex
-                  items-center
+                items-center
-                  justify-center
+                justify-center
-                  w-10
+                w-10
-                  h-10
+                h-10
-                  ml-1
+                ml-1
-                  rounded-full
+                rounded-full
-                  focus:outline-none
+                focus:outline-none
-                  focus:ring-2
+                focus:ring-2
-                  focus:ring-inset
+                focus:ring-inset
-                  focus:ring-white
+                focus:ring-white"
-                "
                 @click="globalStore.setSidebarVisibility(false)"
               >
                 <span class="sr-only">Close sidebar</span>
@@ -82,8 +85,8 @@
                 :to="item.link"
                 :class="[
                   hasActiveUrl(item.link)
-                    ? 'text-primary-500 border-primary-500 bg-gray-100 '
+                    ? 'text-primary-500 border-primary-500 bg-gray-100 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700  dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
-                    : 'text-black',
+                    : 'text-black dark:text-gray-300',
                   'cursor-pointer px-0 pl-4 py-3 border-transparent flex items-center border-l-4 border-solid text-sm not-italic font-medium',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
@@ -100,6 +103,10 @@
                 />
                 {{ $t(item.title) }}
               </router-link>
+              <LightDarkSwitch
+                :show-label="false"
+                class="absolute right-6 top-6 !w-auto"
+              />
             </nav>
           </div>
         </div>
@@ -113,17 +120,16 @@
   <!-- DESKTOP MENU -->
   <div
     class="
-      hidden
+    hidden
-      w-56
+    w-56
-      h-screen
+    h-screen
-      pb-32
+    bg-white
-      overflow-y-auto
+    border-r border-gray-200 border-solid
-      bg-white
+    xl:w-64
-      border-r border-gray-200 border-solid
+    md:fixed md:flex md:flex-col md:inset-y-0
-      xl:w-64
+    pt-16
-      md:fixed md:flex md:flex-col md:inset-y-0
+    dark:border-gray-800
-      pt-16
+    dark:bg-gray-800/80"
-    "
   >
     <div
       v-for="menu in globalStore.menuGroups"
@@ -136,8 +142,8 @@
         :to="item.link"
         :class="[
           hasActiveUrl(item.link)
-            ? 'text-primary-500 border-primary-500 bg-gray-100 '
+            ? 'text-primary-500 border-primary-500 bg-gray-100 dark:border-primary-400 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700 dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
-            : 'text-black',
+            : 'text-black dark:hover:bg-transparent dark:hover:text-white dark:text-gray-300',
           'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid border-transparent text-sm not-italic font-medium',
         ]"
       >
@@ -145,8 +151,8 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 '
+              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
-              : 'text-gray-400 group-hover:text-black',
+              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
         />
@@ -154,6 +160,9 @@
         {{ $t(item.title) }}
       </router-link>
     </div>
+    <LightDarkSwitch
+      class="absolute bottom-0 py-4 border-t border-gray-200 dark:border-gray-700"
+    />
   </div>
 </template>
 
@@ -169,6 +178,7 @@ import {
 
 import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
+import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 
 const route = useRoute()
 const globalStore = useGlobalStore()

resources/scripts/admin/stores/company.js

@@ -184,6 +184,20 @@ export const useCompanyStore = (useWindow = false) => {
       setDefaultCurrency(data) {
         this.defaultCurrency = data.currency
       },
+
+      checkCompanyHasCurrencyTransactions() {
+        return new Promise((resolve, reject) => {
+          axios
+            .get(`/api/v1/company/has-transactions`)
+            .then((response) => {
+              resolve(response)
+            })
+            .catch((err) => {
+              handleError(err)
+              reject(err)
+            })
+        })
+      },
     },
   })()
 }

resources/scripts/admin/stores/global.js

@@ -34,6 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
+      isDarkModeOn: false,
 
       downloadReport: null,
     }),
@@ -70,8 +71,8 @@ export const useGlobalStore = (useWindow = false) => {
               moduleStore.apiToken = response.data.global_settings.api_token
               moduleStore.enableModules = response.data.modules
 
-                // company store
+              // company store
-                companyStore.companies = response.data.companies
+              companyStore.companies = response.data.companies
               companyStore.selectedCompany = response.data.current_company
               companyStore.setSelectedCompany(response.data.current_company)
               companyStore.selectedCompanySettings =

resources/scripts/admin/stores/mail-driver.js

@@ -0,0 +1,146 @@
+import axios from 'axios'
+import { defineStore } from 'pinia'
+import { useNotificationStore } from '@/scripts/stores/notification'
+import { handleError } from '@/scripts/helpers/error-handling'
+
+export const useMailDriverStore = (useWindow = false) => {
+  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
+  const { global } = window.i18n
+
+  return defineStoreFunc({
+    id: 'mail-driver',
+
+    state: () => ({
+      mailConfigData: null,
+      mail_driver: 'smtp',
+      mail_drivers: [],
+
+      basicMailConfig: {
+        mail_driver: '',
+        mail_host: '',
+        from_mail: '',
+        from_name: '',
+      },
+
+      mailgunConfig: {
+        mail_driver: '',
+        mail_mailgun_domain: '',
+        mail_mailgun_secret: '',
+        mail_mailgun_endpoint: '',
+        from_mail: '',
+        from_name: '',
+      },
+
+      sesConfig: {
+        mail_driver: '',
+        mail_host: '',
+        mail_port: null,
+        mail_ses_key: '',
+        mail_ses_secret: '',
+        mail_encryption: 'tls',
+        from_mail: '',
+        from_name: '',
+      },
+
+      smtpConfig: {
+        mail_driver: '',
+        mail_host: '',
+        mail_port: null,
+        mail_username: '',
+        mail_password: '',
+        mail_encryption: 'tls',
+        from_mail: '',
+        from_name: '',
+      },
+    }),
+
+    actions: {
+      fetchMailDrivers() {
+        return new Promise((resolve, reject) => {
+          axios
+            .get('/api/v1/mail/drivers')
+            .then((response) => {
+              if (response.data) {
+                this.mail_drivers = response.data
+              }
+              resolve(response)
+            })
+            .catch((err) => {
+              handleError(err)
+              reject(err)
+            })
+        })
+      },
+
+      fetchMailConfig() {
+        return new Promise((resolve, reject) => {
+          axios
+            .get('/api/v1/mail/config')
+            .then((response) => {
+              if (response.data) {
+                this.mailConfigData = response.data
+                this.mail_driver = response.data.mail_driver
+              }
+              resolve(response)
+            })
+            .catch((err) => {
+              handleError(err)
+              reject(err)
+            })
+        })
+      },
+
+      updateMailConfig(data) {
+        return new Promise((resolve, reject) => {
+          axios
+            .post('/api/v1/mail/config', data)
+            .then((response) => {
+              const notificationStore = useNotificationStore()
+              if (response.data.success) {
+                notificationStore.showNotification({
+                  type: 'success',
+                  message: global.t('wizard.success.' + response.data.success),
+                })
+              } else {
+                notificationStore.showNotification({
+                  type: 'error',
+                  message: global.t('wizard.errors.' + response.data.error),
+                })
+              }
+              resolve(response)
+            })
+            .catch((err) => {
+              handleError(err)
+              reject(err)
+            })
+        })
+      },
+
+      sendTestMail(data) {
+        return new Promise((resolve, reject) => {
+          axios
+            .post('/api/v1/mail/test', data)
+            .then((response) => {
+              const notificationStore = useNotificationStore()
+              if (response.data.success) {
+                notificationStore.showNotification({
+                  type: 'success',
+                  message: global.t('general.send_mail_successfully'),
+                })
+              } else {
+                notificationStore.showNotification({
+                  type: 'error',
+                  message: global.t('validation.something_went_wrong'),
+                })
+              }
+              resolve(response)
+            })
+            .catch((err) => {
+              handleError(err)
+              reject(err)
+            })
+        })
+      },
+    },
+  })()
+}

resources/scripts/admin/stores/mail-sender.js

@@ -1,202 +0,0 @@
-import axios from 'axios'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-import mailSenderStub from '@/scripts/admin/stub/mail-sender.js'
-
-export const useMailSenderStore = (useWindow = false) => {
-  const pre_t = 'settings.mail_sender'
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc({
-    id: 'mailSender',
-
-    state: () => ({
-      mailSenders: [],
-      mail_drivers: [], // list of mail drivers
-      currentMailSender: { ...mailSenderStub.basicConfig },
-      smtpConfig: { ...mailSenderStub.smtpConfig },
-      mailgunConfig: { ...mailSenderStub.mailgunConfig },
-      sesConfig: { ...mailSenderStub.sesConfig },
-      mail_encryptions: ['none', 'tls', 'ssl', 'starttls'],
-      isDisable: false
-    }),
-
-    getters: {
-      isEdit: (state) => (state.currentMailSender.id ? true : false),
-    },
-
-    actions: {
-      resetCurrentMailSender() {
-        this.currentMailSender = { ...mailSenderStub.basicConfig }
-        this.smtpConfig = { ...mailSenderStub.smtpConfig }
-        this.mailgunConfig = { ...mailSenderStub.mailgunConfig }
-        this.sesConfig = { ...mailSenderStub.sesConfig }
-        this.isDisable = false
-      },
-
-      fetchMailDrivers() {
-        return new Promise((resolve, reject) => {
-          axios
-            .get('/api/v1/mail-drivers')
-            .then((response) => {
-              if (response.data) {
-                this.mail_drivers = response.data
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-
-      fetchMailSenders(params) {
-        return new Promise((resolve, reject) => {
-          axios
-            .get(`/api/v1/mail-senders`, { params })
-            .then((response) => {
-              this.mailSenders = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchMailSender(id) {
-        return new Promise((resolve, reject) => {
-          axios
-            .get(`/api/v1/mail-senders/${id}`)
-            .then((response) => {
-              this.currentMailSender = response.data.data
-              this.isDisable = response.data.data.is_default
-              if (response.data.data.settings) {
-                var settings = response.data.data.settings
-                const encryptionNone = settings.encryption == '' || settings.encryption == undefined
-                switch (response.data.data.driver) {
-                  case 'smtp':
-                    this.smtpConfig = settings
-                    encryptionNone ? this.smtpConfig.encryption = 'none' : ''
-                    break
-                  case 'mailgun':
-                    this.mailgunConfig = settings
-                    break
-                  case 'ses':
-                    this.sesConfig = settings
-                    encryptionNone ? this.sesConfig.encryption = 'none' : ''
-                    break
-                }
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addMailSender(data) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          axios
-            .post('/api/v1/mail-senders', data)
-            .then((response) => {
-              this.mailSenders.push(response.data.data)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t(`${pre_t}.created_message`),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateMailSender(data) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          axios
-            .put(`/api/v1/mail-senders/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.mailSenders.findIndex(
-                  (mailSender) => mailSender.id === response.data.data.id
-                )
-                this.mailSenders[pos] = data
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(`${pre_t}.updated_message`),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMailSender(id) {
-        return new Promise((resolve, reject) => {
-          axios
-            .delete(`/api/v1/mail-senders/${id}`)
-            .then((response) => {
-              if (response.data.success) {
-                let index = this.mailSenders.findIndex(
-                  (mailSender) => mailSender.id === id
-                )
-                this.mailSenders.splice(index, 1)
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(`${pre_t}.deleted_message`),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      sendTestMail(data) {
-        return new Promise((resolve, reject) => {
-          axios
-            .post('/api/v1/mail-test', data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              if (response.data.success) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('general.send_mail_successfully'),
-                })
-              } else {
-                notificationStore.showNotification({
-                  type: 'error',
-                  message: global.t('validation.something_went_wrong'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}

resources/scripts/admin/stores/users.js

@@ -25,7 +25,6 @@ export const useUsersStore = (useWindow = false) => {
         password: null,
         phone: null,
         companies: [],
-        sender_id: null,
       },
     }),
 

resources/scripts/admin/stub/abilities.js

@@ -64,13 +64,6 @@ export default {
   EDIT_ROLE: 'edit-role',
   VIEW_ROLE: 'view-role',
 
-  // Mail Sender
-  CREATE_MAIL_SENDER: 'view-mail-sender',
-  DELETE_MAIL_SENDER: 'delete-mail-sender',
-  EDIT_MAIL_SENDER: 'edit-mail-sender',
-  VIEW_MAIL_SENDER: 'view-mail-sender',
-
-
   // exchange rates
   VIEW_EXCHANGE_RATE: 'view-exchange-rate-provider',
   CREATE_EXCHANGE_RATE: 'create-exchange-rate-provider',

resources/scripts/admin/stub/customer.js

@@ -15,6 +15,5 @@ export default function () {
     customFields: [],
     fields: [],
     enable_portal: false,
-    mail_sender_id: null,
   }
 }

resources/scripts/admin/stub/mail-sender.js

@@ -1,31 +0,0 @@
-export default {
-  basicConfig: {
-    name: '',
-    from_name: '',
-    from_address: '',
-    cc: '',
-    bcc: '',
-    is_default: false,
-    driver: 'smtp', // 'smtp', 'mail', 'sendmail', 'mailgun', 'ses'
-    settings: '',
-  },
-  smtpConfig: {
-    host: '',
-    port: null,
-    username: '',
-    password: '',
-    encryption: 'tls', // 'tls', 'ssl', 'starttls'
-  },
-  mailgunConfig: {
-    domain: '',
-    secret: '',
-    endpoint: '',
-  },
-  sesConfig: {
-    host: '',
-    port: null,
-    encryption: 'tls', // 'tls', 'ssl', 'starttls'
-    ses_key: '',
-    ses_secret: '',
-  },
-}

resources/scripts/admin/views/customers/Create.vue

@@ -256,7 +256,6 @@
                   /> </template
               ></BaseInput>
             </BaseInputGroup>
-            <!-- && setPasswordMethod !== 'manual' -->
           </BaseInputGrid>
         </div>
 
@@ -651,7 +650,10 @@ const rules = computed(() => {
       },
 
       email: {
-        required: helpers.withMessage(t('validation.required'), required),
+        required: helpers.withMessage(
+          t('validation.required'),
+          requiredIf(customerStore.currentCustomer.enable_portal == true)
+        ),
         email: helpers.withMessage(t('validation.email_incorrect'), email),
       },
       password: {

resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue

@@ -32,6 +32,8 @@
           :content-loading="isLoading"
           :calendar-button="true"
           calendar-button-icon="calendar"
+          :show-extra-options="true"
+          :source-date="estimateStore.newEstimate.estimate_date"
         />
       </BaseInputGroup>
 

resources/scripts/admin/views/installation/Step5EmailConfig.vue

@@ -3,238 +3,75 @@
     :title="$t('wizard.mail.mail_config')"
     :description="$t('wizard.mail.mail_config_desc')"
   >
-    <form action="" @submit.prevent="submitMailSenderData">
+    <form action="" @submit.prevent="next">
-      <div class="p-4 sm:p-6 my-2">
+      <component
-        <!-- Name -->
+        :is="mailDriverStore.mail_driver"
-        <BaseInputGrid>
+        :config-data="mailDriverStore.mailConfigData"
-          <BaseInputGroup
+        :is-saving="isSaving"
-            :label="$t(`${pre_t}.name`)"
+        :is-fetching-initial-data="isFetchingInitialData"
-            :error="v$.name.$error && v$.name.$errors[0].$message"
+        @on-change-driver="(val) => changeDriver(val)"
-            :help-text="$t(`${pre_t}.name_help`)"
+        @submit-data="next"
-            required
+      />
-          >
-            <BaseInput
-              v-model.trim="mailSenderStore.currentMailSender.name"
-              :invalid="v$.name.$error"
-              type="text"
-              @input="v$.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- From Name -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.from_name`)"
-            :error="v$.from_name.$error && v$.from_name.$errors[0].$message"
-            required
-          >
-            <BaseInput
-              v-model="mailSenderStore.currentMailSender.from_name"
-              :invalid="v$.from_name.$error"
-              type="text"
-              @input="v$.from_name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- From Address -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.from_address`)"
-            :error="
-              v$.from_address.$error && v$.from_address.$errors[0].$message
-            "
-            required
-          >
-            <BaseInput
-              v-model="mailSenderStore.currentMailSender.from_address"
-              :invalid="v$.from_address.$error"
-              type="text"
-              @input="v$.from_address.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- CC -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.cc`)"
-            :error="v$.cc.$error && v$.cc.$errors[0].$message"
-            :help-text="$t(`${pre_t}.email_list`)"
-          >
-            <BaseInput
-              v-model="mailSenderStore.currentMailSender.cc"
-              :invalid="v$.cc.$error"
-              type="text"
-              @input="v$.cc.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- BCC -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.bcc`)"
-            :error="v$.bcc.$error && v$.bcc.$errors[0].$message"
-            :help-text="$t(`${pre_t}.email_list`)"
-          >
-            <BaseInput
-              v-model="mailSenderStore.currentMailSender.bcc"
-              :invalid="v$.bcc.$error"
-              type="text"
-              @input="v$.bcc.$touch()"
-            />
-          </BaseInputGroup>
-
-          <!-- Mail Driver -->
-          <BaseInputGroup
-            :label="$t(`${pre_t}.driver`)"
-            :error="v$.driver.$error && v$.driver.$errors[0].$message"
-            required
-          >
-            <BaseMultiselect
-              v-model="mailSenderStore.currentMailSender.driver"
-              :options="mailSenderStore.mail_drivers"
-              :can-deselect="false"
-              :invalid="v$.driver.$error"
-            />
-          </BaseInputGroup>
-
-          <component
-            :is="loadMailDriver"
-            :mail-sender-store="mailSenderStore"
-          />
-        </BaseInputGrid>
-        <BaseDivider class="my-4" />
-
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="SaveIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('wizard.save_cont') }}
-        </BaseButton>
-      </div>
     </form>
   </BaseWizardStep>
 </template>
 
-<script setup>
+<script>
-import { computed, ref, inject, onMounted } from 'vue'
+import Smtp from './mail-driver/SmtpMailDriver.vue'
-import { useI18n } from 'vue-i18n'
+import Mailgun from './mail-driver/MailgunMailDriver.vue'
-import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
+import Ses from './mail-driver/SesMailDriver.vue'
-import { useVuelidate } from '@vuelidate/core'
+import Basic from './mail-driver/BasicMailDriver.vue'
-import { required, email, minLength, helpers } from '@vuelidate/validators'
+import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import MailSenderDropdown from '@/scripts/admin/components/dropdowns/MailSenderIndexDropdown.vue'
+import { ref } from 'vue'
-import MailSenderTestModal from '@/scripts/admin/components/modal-components/MailSenderTestModal.vue'
-import SmtpDriver from '@/scripts/admin/views/settings/mail-sender/SmtpDriver.vue'
-import MailgunDriver from '@/scripts/admin/views/settings/mail-sender/MailgunDriver.vue'
-import SesDriver from '@/scripts/admin/views/settings/mail-sender/SesDriver.vue'
 
-const pre_t = 'settings.mail_sender'
+export default {
-const mailSenderStore = useMailSenderStore()
+  components: {
-const { t } = useI18n()
+    Smtp,
-const table = ref(null)
+    Mailgun,
-const utils = inject('utils')
+    Ses,
-let isSaving = ref(false)
+    sendmail: Basic,
-const emit = defineEmits(['next'])
+    Mail: Basic,
+  },
 
-const loadMailDriver = computed(() => {
+  emits: ['next'],
-  switch (mailSenderStore.currentMailSender.driver) {
-    case 'smtp':
-      return SmtpDriver
-      break
-    case 'mail':
-      return false
-      break
-    case 'sendmail':
-      return false
-      break
-    case 'mailgun':
-      return MailgunDriver
-      break
-    case 'ses':
-      return SesDriver
-      break
-    default:
-      return false
-  }
-})
 
-// This is multiple email custom validation
+  setup(props, { emit }) {
-const multiEmail = (value) => {
+    const isSaving = ref(false)
-  if (value == '' || value === null) return true
+    const isFetchingInitialData = ref(false)
-  const emailRegex =
-    /^(?:[A-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i
 
-  const emailArr = value.split(',')
+    const mailDriverStore = useMailDriverStore()
-  let isValid = emailArr.every((v) => {
-    return emailRegex.test(v)
-  })
-  return isValid
-}
 
-const rules = computed(() => {
+    mailDriverStore.mail_driver = 'mail'
-  return {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.name_min_length', { count: 3 }),
-        minLength(3)
-      ),
-    },
-    from_name: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    from_address: {
-      required: helpers.withMessage(t('validation.required'), required),
-      email: helpers.withMessage(t('validation.email_incorrect'), email),
-    },
-    cc: {
-      multiEmail: helpers.withMessage(
-        t('validation.email_incorrect'),
-        multiEmail
-      ),
-    },
-    bcc: {
-      multiEmail: helpers.withMessage(
-        t('validation.email_incorrect'),
-        multiEmail
-      ),
-    },
-    driver: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-  }
-})
 
-const v$ = useVuelidate(
+    loadData()
-  rules,
-  computed(() => mailSenderStore.currentMailSender)
-)
 
-async function submitMailSenderData() {
+    function changeDriver(value) {
-  v$.value.$touch()
+      mailDriverStore.mail_driver = value
-  if (v$.value.$invalid) {
-    return true
-  }
-  try {
-    let data = {
-      ...mailSenderStore.currentMailSender,
-      is_default: true,
     }
-    await mailSenderStore.addMailSender(data)
-    isSaving.value = true
-    emit('next')
-    isSaving.value = false
-  } catch (err) {
-    isSaving.value = false
-    return true
-  }
-}
 
-onMounted(async () => {
+    async function loadData() {
-  await mailSenderStore.fetchMailDrivers()
+      isFetchingInitialData.value = true
-})
+      await mailDriverStore.fetchMailDrivers()
+      isFetchingInitialData.value = false
+    }
+
+    async function next(mailConfigData) {
+      isSaving.value = true
+      let res = await mailDriverStore.updateMailConfig(mailConfigData)
+      isSaving.value = false
+
+      if (res.data.success) {
+        await emit('next', 5)
+      }
+    }
+
+    return {
+      mailDriverStore,
+      isSaving,
+      isFetchingInitialData,
+      changeDriver,
+      next,
+    }
+  },
+}
 </script>

resources/scripts/admin/views/installation/Step7CompanyInfo.vue

@@ -34,6 +34,24 @@
           />
         </BaseInputGroup>
 
+        <BaseInputGroup
+          :label="$tc('wizard.company_slug')"
+          :help-text="$t('wizard.company_slug_help_text')"
+          :error="
+            v$.companyForm.slug.$error &&
+            v$.companyForm.slug.$errors[0].$message
+          "
+          required
+        >
+          <BaseInput
+            v-model="companyForm.slug"
+            :invalid="v$.companyForm.slug.$error"
+            type="text"
+            name="slug"
+            @input="v$.companyForm.slug.$touch()"
+          />
+        </BaseInputGroup>
+
         <BaseInputGroup
           :label="$t('wizard.country')"
           :error="
@@ -57,9 +75,7 @@
             track-by="name"
           />
         </BaseInputGroup>
-      </div>
 
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
         <BaseInputGroup :label="$t('wizard.state')">
           <BaseInput
             v-model="companyForm.address.state"
@@ -144,9 +160,9 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue'
+import { ref, computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { required, maxLength, helpers } from '@vuelidate/validators'
+import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
@@ -162,6 +178,7 @@ let logoFileName = ref(null)
 
 const companyForm = reactive({
   name: null,
+  slug: null,
   address: {
     address_street_1: '',
     address_street_2: '',
@@ -188,10 +205,28 @@ onMounted(async () => {
   })?.id
 })
 
+const slugValidator = (value) => {
+  return value == slugify(value)
+}
 const rules = {
   companyForm: {
     name: {
       required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+    },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+      slugValidator: helpers.withMessage(
+        t('validation.invalid_slug'),
+        slugValidator
+      ),
     },
     address: {
       country_id: {
@@ -249,4 +284,24 @@ async function next() {
     emit('next', 7)
   }
 }
+
+// watcher for if change company name then auto fill company slug value
+watch(
+  () => companyForm.name,
+  (currentValue) => {
+    companyForm.slug = slugify(currentValue)
+  }
+)
+
+function slugify(string) {
+  return string
+    .toString()
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
 </script>

resources/scripts/admin/views/invoices/Index.vue

@@ -56,7 +56,7 @@
         <BaseMultiselect
           v-model="filters.status"
           :groups="true"
-          :options="status"
+          :options="invoiceStatus"
           searchable
           :placeholder="$t('general.select_a_status')"
           @update:modelValue="setActiveTab"
@@ -130,11 +130,27 @@
         "
       >
         <!-- Tabs -->
-        <BaseTabGroup class="-mb-5" @change="setStatusFilter">
+        <BaseTabGroup
-          <BaseTab :title="$t('general.all')" filter="" />
+          class="-mb-5"
-          <BaseTab :title="$t('general.draft')" filter="DRAFT" />
+          :selected-index="selectedIndex"
-          <BaseTab :title="$t('general.sent')" filter="SENT" />
+          @change="changeTabStatus"
-          <BaseTab :title="$t('general.due')" filter="DUE" />
+        >
+          <BaseTab
+            :title="invoiceTabStatus[0].title"
+            :tab-status="invoiceTabStatus[0].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[1].title"
+            :tab-status="invoiceTabStatus[1].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[2].title"
+            :tab-status="invoiceTabStatus[2].value"
+          />
+          <BaseTab
+            :title="invoiceTabStatus[3].title"
+            :tab-status="invoiceTabStatus[3].value"
+          />
         </BaseTabGroup>
 
         <BaseDropdown
@@ -289,10 +305,10 @@ const utils = inject('$utils')
 const table = ref(null)
 const showFilters = ref(false)
 
-const status = ref([
+const invoiceStatus = ref([
   {
     label: 'Status',
-    options: ['DRAFT', 'DUE', 'SENT', 'VIEWED', 'COMPLETED'],
+    options: ['DRAFT', 'SENT', 'VIEWED', 'COMPLETED'],
   },
   {
     label: 'Paid Status',
@@ -300,10 +316,29 @@ const status = ref([
   },
   ,
 ])
+
+const invoiceTabStatus = {
+  0: {
+    title: t('general.all'),
+    value: '',
+  },
+  1: {
+    title: t('general.draft'),
+    value: 'DRAFT',
+  },
+  2: {
+    title: t('general.sent'),
+    value: 'SENT',
+  },
+  3: {
+    title: t('general.due'),
+    value: 'DUE',
+  },
+}
 const isRequestOngoing = ref(true)
-const activeTab = ref('general.draft')
 const router = useRouter()
 const userStore = useUserStore()
+const selectedIndex = ref(0)
 
 let filters = reactive({
   customer_id: '',
@@ -311,6 +346,7 @@ let filters = reactive({
   from_date: '',
   to_date: '',
   invoice_number: '',
+  tab_status: '',
 })
 
 const showEmptyScreen = computed(
@@ -401,6 +437,7 @@ async function fetchData({ page, filter, sort }) {
     from_date: filters.from_date,
     to_date: filters.to_date,
     invoice_number: filters.invoice_number,
+    tab_status: filters.tab_status,
     orderByField: sort.fieldName || 'created_at',
     orderBy: sort.order || 'desc',
     page,
@@ -423,29 +460,9 @@ async function fetchData({ page, filter, sort }) {
   }
 }
 
-function setStatusFilter(val) {
+function changeTabStatus(val, index) {
-  if (activeTab.value == val.title) {
+  filters.tab_status = val['tab-status']
-    return true
+  selectedIndex.value = index
-  }
-
-  activeTab.value = val.title
-
-  switch (val.title) {
-    case t('general.draft'):
-      filters.status = 'DRAFT'
-      break
-    case t('general.sent'):
-      filters.status = 'SENT'
-      break
-
-    case t('general.due'):
-      filters.status = 'DUE'
-      break
-
-    default:
-      filters.status = ''
-      break
-  }
 }
 
 function setFilters() {
@@ -463,8 +480,6 @@ function clearFilter() {
   filters.from_date = ''
   filters.to_date = ''
   filters.invoice_number = ''
-
-  activeTab.value = t('general.all')
 }
 
 async function removeMultipleInvoices() {
@@ -505,39 +520,21 @@ function toggleFilter() {
 function setActiveTab(val) {
   switch (val) {
     case 'DRAFT':
-      activeTab.value = t('general.draft')
+      selectedIndex.value = 1
       break
+
     case 'SENT':
-      activeTab.value = t('general.sent')
+    case 'VIEWED':
-      break
-
-    case 'DUE':
-      activeTab.value = t('general.due')
-      break
-
     case 'COMPLETED':
-      activeTab.value = t('invoices.completed')
-      break
-
     case 'PAID':
-      activeTab.value = t('invoices.paid')
+      selectedIndex.value = 2
       break
 
     case 'UNPAID':
-      activeTab.value = t('invoices.unpaid')
-      break
-
     case 'PARTIALLY_PAID':
-      activeTab.value = t('invoices.partially_paid')
+      selectedIndex.value = 3
-      break
-
-    case 'VIEWED':
-      activeTab.value = t('invoices.viewed')
-      break
-
-    default:
-      activeTab.value = t('general.all')
       break
   }
+  filters.tab_status = invoiceTabStatus[selectedIndex.value].value
 }
 </script>

resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue

@@ -32,6 +32,8 @@
           :content-loading="isLoading"
           :calendar-button="true"
           calendar-button-icon="calendar"
+          :show-extra-options="true"
+          :source-date="invoiceStore.newInvoice.invoice_date"
         />
       </BaseInputGroup>
 

resources/scripts/admin/views/modules/Index.vue

@@ -53,7 +53,7 @@
           </div>
         </div>
         <div v-else class="mt-24">
-          <label class="flex items-center justify-center text-gray-500">
+          <label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
             {{ $t('modules.no_modules_installed') }}
           </label>
         </div>

resources/scripts/admin/views/payments/Create.vue

@@ -82,9 +82,9 @@
             required
           >
             <BaseCustomerSelectInput
+              v-if="!isLoadingContent"
               v-model="paymentStore.currentPayment.customer_id"
               :content-loading="isLoadingContent"
-              v-if="!isLoadingContent"
               :invalid="v$.currentPayment.customer_id.$error"
               :placeholder="$t('customers.select_a_customer')"
               show-action
@@ -215,9 +215,9 @@
             <SelectNotePopup type="Payment" @select="onSelectNote" />
           </div>
 
-          <label class="mb-4 text-sm font-medium text-gray-800">
+          <BaseLabel class="!mb-4  !text-gray-800">
             {{ $t('estimates.notes') }}
-          </label>
+          </BaseLabel>
 
           <BaseCustomInput
             v-model="paymentStore.currentPayment.notes"
@@ -423,7 +423,7 @@ function onCustomerChange(customer_id) {
   if (customer_id) {
     let data = {
       customer_id: customer_id,
-      status: 'DUE',
+      tab_status: 'DUE',
       limit: 'all',
     }
 
@@ -446,7 +446,11 @@ function onCustomerChange(customer_id) {
           paymentStore.currentPayment.selectedCustomer = res2.data.data
           paymentStore.currentPayment.customer = res2.data.data
           paymentStore.currentPayment.currency = res2.data.data.currency
-          if(isEdit.value && !customerStore.editCustomer && paymentStore.currentPayment.customer_id) {
+          if (
+            isEdit.value &&
+            !customerStore.editCustomer &&
+            paymentStore.currentPayment.customer_id
+          ) {
             customerStore.editCustomer = res2.data.data
           }
         }

resources/scripts/admin/views/settings/CompanyInfoSettings.vue

@@ -28,6 +28,19 @@
           />
         </BaseInputGroup>
 
+        <BaseInputGroup
+          :label="$tc('settings.company_info.company_slug')"
+          :help-text="$t('settings.company_info.company_slug_help_text')"
+          :error="v$.slug.$error && v$.slug.$errors[0].$message"
+          required
+        >
+          <BaseInput
+            v-model="companyForm.slug"
+            :invalid="v$.slug.$error"
+            @blur="v$.slug.$touch()"
+          />
+        </BaseInputGroup>
+
         <BaseInputGroup :label="$tc('settings.company_info.phone')">
           <BaseInput v-model="companyForm.address.phone" />
         </BaseInputGroup>
@@ -160,6 +173,7 @@ let isSaving = ref(false)
 
 const companyForm = reactive({
   name: null,
+  slug: null,
   logo: null,
   address: {
     address_street_1: '',
@@ -193,7 +207,14 @@ const rules = computed(() => {
     name: {
       required: helpers.withMessage(t('validation.required'), required),
       minLength: helpers.withMessage(
-        t('validation.name_min_length'),
+        t('validation.name_min_length', { count: 3 }),
+        minLength(3)
+      ),
+    },
+    slug: {
+      required: helpers.withMessage(t('validation.required'), required),
+      minLength: helpers.withMessage(
+        t('validation.name_min_length', { count: 3 }),
         minLength(3)
       ),
     },

resources/scripts/admin/views/settings/PreferencesSetting.vue

@@ -8,7 +8,11 @@
         <BaseInputGroup
           :content-loading="isFetchingInitialData"
           :label="$tc('settings.preferences.currency')"
-          :help-text="$t('settings.preferences.company_currency_unchangeable')"
+          :help-text="
+            isCurrencyDisabled
+              ? $t('settings.preferences.company_currency_unchangeable')
+              : ''
+          "
           :error="v$.currency.$error && v$.currency.$errors[0].$message"
           required
         >
@@ -21,7 +25,7 @@
             :searchable="true"
             track-by="name"
             :invalid="v$.currency.$error"
-            disabled
+            :disabled="isCurrencyDisabled"
             class="w-full"
           >
           </BaseMultiselect>
@@ -187,6 +191,7 @@ const { t, tm } = useI18n()
 let isSaving = ref(false)
 let isDataSaving = ref(false)
 let isFetchingInitialData = ref(false)
+let isCurrencyDisabled = ref(true)
 
 const settingsForm = reactive({ ...companyStore.selectedCompanySettings })
 
@@ -282,10 +287,14 @@ setInitialData()
 async function setInitialData() {
   isFetchingInitialData.value = true
   Promise.all([
+    companyStore.checkCompanyHasCurrencyTransactions(),
     globalStore.fetchCurrencies(),
     globalStore.fetchDateFormats(),
     globalStore.fetchTimeZones(),
   ]).then(([res1]) => {
+    if (res1.data?.has_transactions == false) {
+      isCurrencyDisabled.value = false
+    }
     isFetchingInitialData.value = false
   })
 }

resources/scripts/admin/views/settings/UpdateAppSetting.vue

@@ -4,9 +4,9 @@
     :description="$t('settings.update_app.description')"
   >
     <div class="pb-8 ml-0">
-      <label class="text-sm not-italic font-medium input-label">
+      <BaseLabel class="!input-label">
         {{ $t('settings.update_app.current_version') }}
-      </label>
+      </BaseLabel>
 
       <div
         class="
@@ -64,9 +64,9 @@
           </div>
         </div>
 
-        <label class="text-sm not-italic font-medium input-label">
+        <BaseLabel class="!input-label">
           {{ $t('settings.update_app.next_version') }}
-        </label>
+        </BaseLabel>
         <br />
         <div
           class="
@@ -99,9 +99,9 @@
           v-html="description"
         ></div>
 
-        <label class="text-sm not-italic font-medium input-label">
+        <BaseLabel class=" !input-label">
           {{ $t('settings.update_app.requirements') }}
-        </label>
+        </BaseLabel>
 
         <table class="w-1/2 mt-2 border-2 border-gray-200 BaseTable-fixed">
           <tr

resources/scripts/admin/views/settings/customization/NumberCustomizer.vue

@@ -97,6 +97,7 @@
                   whitespace-nowrap
                   mr-2
                   min-w-[200px]
+                  dark:text-primary-400
                 "
               >
                 {{ element.label }}

resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue

@@ -0,0 +1,158 @@
+<template>
+  <form @submit.prevent="saveEmailConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.mail.driver')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.basicMailConfig.mail_driver.$error &&
+          v$.basicMailConfig.mail_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="mailDriverStore.basicMailConfig.mail_driver"
+          :content-loading="isFetchingInitialData"
+          :options="mailDrivers"
+          :can-deselect="false"
+          :invalid="v$.basicMailConfig.mail_driver.$error"
+          @update:modelValue="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_mail')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.basicMailConfig.from_mail.$error &&
+          v$.basicMailConfig.from_mail.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.basicMailConfig.from_mail"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_mail"
+          :invalid="v$.basicMailConfig.from_mail.$error"
+          @input="v$.basicMailConfig.from_mail.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_name')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.basicMailConfig.from_name.$error &&
+          v$.basicMailConfig.from_name.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.basicMailConfig.from_name"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="name"
+          :invalid="v$.basicMailConfig.from_name.$error"
+          @input="v$.basicMailConfig.from_name.$touch()"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+    <div class="flex mt-8">
+      <BaseButton
+        :content-loading="isFetchingInitialData"
+        :disabled="isSaving"
+        :loading="isSaving"
+        variant="primary"
+        type="submit"
+      >
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { onMounted, computed } from 'vue'
+import { required, email, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useI18n } from 'vue-i18n'
+import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    require: true,
+    default: Object,
+  },
+  isSaving: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  isFetchingInitialData: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  mailDrivers: {
+    type: Array,
+    require: true,
+    default: Array,
+  },
+})
+
+const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+const mailDriverStore = useMailDriverStore()
+const { t } = useI18n()
+
+const rules = computed(() => {
+  return {
+    basicMailConfig: {
+      mail_driver: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      from_mail: {
+        required: helpers.withMessage(t('validation.required'), required),
+        email: helpers.withMessage(t('validation.email_incorrect'), email),
+      },
+      from_name: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+    },
+  }
+})
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => mailDriverStore)
+)
+
+onMounted(() => {
+  for (const key in mailDriverStore.basicMailConfig) {
+    if (props.configData.hasOwnProperty(key)) {
+      mailDriverStore.$patch((state) => {
+        state.basicMailConfig[key] = props.configData[key]
+      })
+    }
+  }
+})
+
+async function saveEmailConfig() {
+  v$.value.basicMailConfig.$touch()
+  if (!v$.value.basicMailConfig.$invalid) {
+    emit('submit-data', mailDriverStore.basicMailConfig)
+  }
+  return false
+}
+
+function onChangeDriver() {
+  v$.value.basicMailConfig.mail_driver.$touch()
+  emit('on-change-driver', mailDriverStore.basicMailConfig.mail_driver)
+}
+</script>

resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue

@@ -0,0 +1,247 @@
+<template>
+  <form @submit.prevent="saveEmailConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.mail.driver')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mailgunConfig.mail_driver.$error &&
+          v$.mailgunConfig.mail_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="mailDriverStore.mailgunConfig.mail_driver"
+          :content-loading="isFetchingInitialData"
+          :options="mailDrivers"
+          :can-deselect="false"
+          :invalid="v$.mailgunConfig.mail_driver.$error"
+          @update:modelValue="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.mailgun_domain')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mailgunConfig.mail_mailgun_domain.$error &&
+          v$.mailgunConfig.mail_mailgun_domain.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_domain"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mailgun_domain"
+          :invalid="v$.mailgunConfig.mail_mailgun_domain.$error"
+          @input="v$.mailgunConfig.mail_mailgun_domain.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.mailgun_secret')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mailgunConfig.mail_mailgun_secret.$error &&
+          v$.mailgunConfig.mail_mailgun_secret.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
+          :content-loading="isFetchingInitialData"
+          :type="getInputType"
+          name="mailgun_secret"
+          autocomplete="off"
+          :invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
+          @input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
+        >
+          <template #right>
+            <BaseIcon
+              v-if="isShowPassword"
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeOffIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+            <BaseIcon
+              v-else
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.mailgun_endpoint')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mailgunConfig.mail_mailgun_endpoint.$error &&
+          v$.mailgunConfig.mail_mailgun_endpoint.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_endpoint"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mailgun_endpoint"
+          :invalid="v$.mailgunConfig.mail_mailgun_endpoint.$error"
+          @input="v$.mailgunConfig.mail_mailgun_endpoint.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_mail')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mailgunConfig.from_mail.$error &&
+          v$.mailgunConfig.from_mail.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.mailgunConfig.from_mail"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_mail"
+          :invalid="v$.mailgunConfig.from_mail.$error"
+          @input="v$.mailgunConfig.from_mail.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_name')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.mailgunConfig.from_name.$error &&
+          v$.mailgunConfig.from_name.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.mailgunConfig.from_name"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_name"
+          :invalid="v$.mailgunConfig.from_name.$error"
+          @input="v$.mailgunConfig.from_name.$touch()"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        variant="primary"
+        type="submit"
+      >
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from 'vue'
+import { required, email, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useI18n } from 'vue-i18n'
+import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    require: true,
+    default: Object,
+  },
+  isSaving: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  isFetchingInitialData: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  mailDrivers: {
+    type: Array,
+    require: true,
+    default: Array,
+  },
+})
+
+const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+const mailDriverStore = useMailDriverStore()
+const { t } = useI18n()
+
+let isShowPassword = ref(false)
+
+const getInputType = computed(() => {
+  if (isShowPassword.value) {
+    return 'text'
+  }
+  return 'password'
+})
+
+const rules = computed(() => {
+  return {
+    mailgunConfig: {
+      mail_driver: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_mailgun_domain: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_mailgun_endpoint: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_mailgun_secret: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      from_mail: {
+        required: helpers.withMessage(t('validation.required'), required),
+        email,
+      },
+      from_name: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+    },
+  }
+})
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => mailDriverStore)
+)
+
+onMounted(() => {
+  for (const key in mailDriverStore.mailgunConfig) {
+    if (props.configData.hasOwnProperty(key)) {
+      mailDriverStore.mailgunConfig[key] = props.configData[key]
+    }
+  }
+})
+
+async function saveEmailConfig() {
+  v$.value.mailgunConfig.$touch()
+  if (!v$.value.mailgunConfig.$invalid) {
+    emit('submit-data', mailDriverStore.mailgunConfig)
+  }
+  return false
+}
+
+function onChangeDriver() {
+  v$.value.mailgunConfig.mail_driver.$touch()
+  emit('on-change-driver', mailDriverStore.mailgunConfig.mail_driver)
+}
+</script>

resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue

@@ -0,0 +1,294 @@
+<template>
+  <form @submit.prevent="saveEmailConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.mail.driver')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.mail_driver.$error &&
+          v$.sesConfig.mail_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="mailDriverStore.sesConfig.mail_driver"
+          :content-loading="isFetchingInitialData"
+          :options="mailDrivers"
+          :can-deselect="false"
+          :invalid="v$.sesConfig.mail_driver.$error"
+          @update:modelValue="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.host')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.mail_host.$error &&
+          v$.sesConfig.mail_host.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.sesConfig.mail_host"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_host"
+          :invalid="v$.sesConfig.mail_host.$error"
+          @input="v$.sesConfig.mail_host.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.port')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.mail_port.$error &&
+          v$.sesConfig.mail_port.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.sesConfig.mail_port"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_port"
+          :invalid="v$.sesConfig.mail_port.$error"
+          @input="v$.sesConfig.mail_port.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.encryption')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.mail_encryption.$error &&
+          v$.sesConfig.mail_encryption.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model.trim="mailDriverStore.sesConfig.mail_encryption"
+          :content-loading="isFetchingInitialData"
+          :options="encryptions"
+          :invalid="v$.sesConfig.mail_encryption.$error"
+          placeholder="Select option"
+          @input="v$.sesConfig.mail_encryption.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_mail')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.from_mail.$error &&
+          v$.sesConfig.from_mail.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.sesConfig.from_mail"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_mail"
+          :invalid="v$.sesConfig.from_mail.$error"
+          @input="v$.sesConfig.from_mail.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_name')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.from_name.$error &&
+          v$.sesConfig.from_name.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.sesConfig.from_name"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="name"
+          :invalid="v$.sesConfig.from_name.$error"
+          @input="v$.sesConfig.from_name.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.ses_key')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.mail_ses_key.$error &&
+          v$.sesConfig.mail_ses_key.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.sesConfig.mail_ses_key"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_ses_key"
+          :invalid="v$.sesConfig.mail_ses_key.$error"
+          @input="v$.sesConfig.mail_ses_key.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.ses_secret')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.sesConfig.mail_ses_secret.$error &&
+          v$.mail_ses_secret.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
+          :content-loading="isFetchingInitialData"
+          :type="getInputType"
+          name="mail_ses_secret"
+          autocomplete="off"
+          :invalid="v$.sesConfig.mail_ses_secret.$error"
+          @input="v$.sesConfig.mail_ses_secret.$touch()"
+        >
+          <template #right>
+            <BaseIcon
+              v-if="isShowPassword"
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeOffIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+            <BaseIcon
+              v-else
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+    </BaseInputGrid>
+
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        variant="primary"
+        type="submit"
+      >
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { required, email, numeric, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useI18n } from 'vue-i18n'
+import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    require: true,
+    default: Object,
+  },
+  isSaving: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  isFetchingInitialData: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  mailDrivers: {
+    type: Array,
+    require: true,
+    default: Array,
+  },
+})
+
+const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+const mailDriverStore = useMailDriverStore()
+const { t } = useI18n()
+
+let isShowPassword = ref(false)
+const encryptions = reactive(['tls', 'ssl', 'starttls'])
+
+const rules = computed(() => {
+  return {
+    sesConfig: {
+      mail_driver: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_host: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_port: {
+        required: helpers.withMessage(t('validation.required'), required),
+        numeric,
+      },
+      mail_ses_key: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_ses_secret: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_encryption: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      from_mail: {
+        required: helpers.withMessage(t('validation.required'), required),
+        email: helpers.withMessage(t('validation.email_incorrect'), email),
+      },
+      from_name: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+    },
+  }
+})
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => mailDriverStore)
+)
+
+const getInputType = computed(() => {
+  if (isShowPassword.value) {
+    return 'text'
+  }
+  return 'password'
+})
+
+onMounted(() => {
+  for (const key in mailDriverStore.sesConfig) {
+    if (props.configData.hasOwnProperty(key)) {
+      mailDriverStore.sesConfig[key] = props.configData[key]
+    }
+  }
+})
+
+async function saveEmailConfig() {
+  v$.value.sesConfig.$touch()
+  if (!v$.value.sesConfig.$invalid) {
+    emit('submit-data', mailDriverStore.sesConfig)
+  }
+  return false
+}
+
+function onChangeDriver() {
+  v$.value.sesConfig.mail_driver.$touch()
+  emit('on-change-driver', mailDriverStore.sesConfig.mail_driver)
+}
+</script>

resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue

@@ -0,0 +1,275 @@
+<template>
+  <form @submit.prevent="saveEmailConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.mail.driver')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.smtpConfig.mail_driver.$error &&
+          v$.smtpConfig.mail_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="mailDriverStore.smtpConfig.mail_driver"
+          :content-loading="isFetchingInitialData"
+          :options="mailDrivers"
+          :can-deselect="false"
+          :invalid="v$.smtpConfig.mail_driver.$error"
+          @update:modelValue="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.host')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.smtpConfig.mail_host.$error &&
+          v$.smtpConfig.mail_host.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.smtpConfig.mail_host"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_host"
+          :invalid="v$.smtpConfig.mail_host.$error"
+          @input="v$.smtpConfig.mail_host.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :content-loading="isFetchingInitialData"
+        :label="$t('settings.mail.username')"
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.smtpConfig.mail_username"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="db_name"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :content-loading="isFetchingInitialData"
+        :label="$t('settings.mail.password')"
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.smtpConfig.mail_password"
+          :content-loading="isFetchingInitialData"
+          :type="getInputType"
+          name="password"
+        >
+          <template #right>
+            <BaseIcon
+              v-if="isShowPassword"
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeOffIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+            <BaseIcon
+              v-else
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.port')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.smtpConfig.mail_port.$error &&
+          v$.smtpConfig.mail_port.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.smtpConfig.mail_port"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="mail_port"
+          :invalid="v$.smtpConfig.mail_port.$error"
+          @input="v$.smtpConfig.mail_port.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.encryption')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.smtpConfig.mail_encryption.$error &&
+          v$.smtpConfig.mail_encryption.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model.trim="mailDriverStore.smtpConfig.mail_encryption"
+          :content-loading="isFetchingInitialData"
+          :options="encryptions"
+          :searchable="true"
+          :show-labels="false"
+          placeholder="Select option"
+          :invalid="v$.smtpConfig.mail_encryption.$error"
+          @input="v$.smtpConfig.mail_encryption.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_mail')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.smtpConfig.from_mail.$error &&
+          v$.smtpConfig.from_mail.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.smtpConfig.from_mail"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_mail"
+          :invalid="v$.smtpConfig.from_mail.$error"
+          @input="v$.smtpConfig.from_mail.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.mail.from_name')"
+        :content-loading="isFetchingInitialData"
+        :error="
+          v$.smtpConfig.from_name.$error &&
+          v$.smtpConfig.from_name.$errors[0].$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="mailDriverStore.smtpConfig.from_name"
+          :content-loading="isFetchingInitialData"
+          type="text"
+          name="from_name"
+          :invalid="v$.smtpConfig.from_name.$error"
+          @input="v$.smtpConfig.from_name.$touch()"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        type="submit"
+        variant="primary"
+      >
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { reactive, onMounted, ref, computed } from 'vue'
+import { required, email, numeric, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useI18n } from 'vue-i18n'
+import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
+
+const props = defineProps({
+  configData: {
+    type: Object,
+    require: true,
+    default: Object,
+  },
+  isSaving: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  isFetchingInitialData: {
+    type: Boolean,
+    require: true,
+    default: false,
+  },
+  mailDrivers: {
+    type: Array,
+    require: true,
+    default: Array,
+  },
+})
+
+const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+const mailDriverStore = useMailDriverStore()
+const { t } = useI18n()
+
+let isShowPassword = ref(false)
+const encryptions = reactive(['tls', 'ssl', 'starttls'])
+
+const getInputType = computed(() => {
+  if (isShowPassword.value) {
+    return 'text'
+  }
+  return 'password'
+})
+
+const rules = computed(() => {
+  return {
+    smtpConfig: {
+      mail_driver: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_host: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      mail_port: {
+        required: helpers.withMessage(t('validation.required'), required),
+        numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
+      },
+      mail_encryption: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+      from_mail: {
+        required: helpers.withMessage(t('validation.required'), required),
+        email: helpers.withMessage(t('validation.email_incorrect'), email),
+      },
+      from_name: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+    },
+  }
+})
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => mailDriverStore)
+)
+
+onMounted(() => {
+  for (const key in mailDriverStore.smtpConfig) {
+    if (props.configData.hasOwnProperty(key)) {
+      mailDriverStore.smtpConfig[key] = props.configData[key]
+    }
+  }
+})
+
+async function saveEmailConfig() {
+  v$.value.smtpConfig.$touch()
+  if (!v$.value.smtpConfig.$invalid) {
+    emit('submit-data', mailDriverStore.smtpConfig)
+  }
+  return false
+}
+
+function onChangeDriver() {
+  v$.value.smtpConfig.mail_driver.$touch()
+  emit('on-change-driver', mailDriverStore.smtpConfig.mail_driver)
+}
+</script>

resources/scripts/admin/views/settings/mail-sender/Index.vue

@@ -1,136 +0,0 @@
-<template>
-  <BaseSettingCard
-    :title="$tc(`${pre_t}.title`, 2)"
-    :description="$t(`${pre_t}.description`)"
-  >
-    <MailSenderModal />
-    <MailSenderTestModal />
-
-    <template #action>
-      <BaseButton
-        type="submit"
-        variant="primary-outline"
-        @click="openMailSenderModal"
-      >
-        <template #left="slotProps">
-          <BaseIcon :class="slotProps.class" name="PlusIcon" />
-        </template>
-        {{ $t(`${pre_t}.add_new_mail_sender`) }}
-      </BaseButton>
-    </template>
-
-    <BaseTable
-      ref="table"
-      class="mt-16"
-      :data="fetchData"
-      :columns="mailSenderColumns"
-    >
-      <template #cell-is_default="{ row }">
-        <BaseBadge
-          :bg-color="
-            utils.getBadgeStatusColor(row.data.is_default ? 'YES' : 'NO')
-              .bgColor
-          "
-          :color="
-            utils.getBadgeStatusColor(row.data.is_default ? 'YES' : 'NO').color
-          "
-        >
-          {{ row.data.is_default ? $t('general.yes') : $t('general.no') }}
-        </BaseBadge>
-      </template>
-
-      <template #cell-actions="{ row }">
-        <MailSenderDropdown
-          :row="row.data"
-          :table="table"
-          :load-data="refreshTable"
-        />
-      </template>
-    </BaseTable>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { computed, ref, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useModalStore } from '@/scripts/stores/modal'
-import MailSenderModal from '@/scripts/admin/components/modal-components/MailSenderModal.vue'
-import { useMailSenderStore } from '@/scripts/admin/stores/mail-sender'
-import MailSenderDropdown from '@/scripts/admin/components/dropdowns/MailSenderIndexDropdown.vue'
-import MailSenderTestModal from '@/scripts/admin/components/modal-components/MailSenderTestModal.vue'
-
-const pre_t = 'settings.mail_sender'
-const modalStore = useModalStore()
-const mailSenderStore = useMailSenderStore()
-const { t } = useI18n()
-const table = ref(null)
-const utils = inject('utils')
-
-function openMailSenderModal() {
-  modalStore.openModal({
-    title: t(`${pre_t}.add_new_mail_sender`),
-    componentName: 'MailSenderModal',
-    size: 'md',
-    refreshData: refreshTable,
-  })
-}
-
-const mailSenderColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t(`${pre_t}.name`),
-      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
-    },
-    {
-      key: 'driver',
-      label: t(`${pre_t}.driver`),
-      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
-    },
-    {
-      key: 'from_address',
-      label: t(`${pre_t}.from_address`),
-      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
-    },
-    {
-      key: 'is_default',
-      label: t(`${pre_t}.is_default`),
-      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  let response = await mailSenderStore.fetchMailSenders(data)
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: response.data.meta.per_page ? response.data.meta.per_page : 10,
-    },
-  }
-}
-
-async function refreshTable() {
-  table.value && table.value.refresh()
-}
-</script>

resources/scripts/admin/views/settings/mail-sender/MailgunDriver.vue

@@ -1,104 +0,0 @@
-<template>
-  <!-- Domain -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.domain`)"
-    :error="v$.domain.$error && v$.domain.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model.trim="mailSenderStore.mailgunConfig.domain"
-      :invalid="v$.domain.$error"
-      type="text"
-      @input="v$.domain.$touch()"
-    />
-  </BaseInputGroup>
-
-  <!-- Mailgun Secret -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.secret`)"
-    :error="v$.secret.$error && v$.secret.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model="mailSenderStore.mailgunConfig.secret"
-      :type="getInputType"
-      autocomplete="off"
-      :invalid="v$.secret.$error"
-      @input="v$.secret.$touch()"
-    >
-      <template #right>
-        <BaseIcon
-          v-if="isShowPassword"
-          class="mr-1 text-gray-500 cursor-pointer"
-          name="EyeOffIcon"
-          @click="isShowPassword = !isShowPassword"
-        />
-        <BaseIcon
-          v-else
-          class="mr-1 text-gray-500 cursor-pointer"
-          name="EyeIcon"
-          @click="isShowPassword = !isShowPassword"
-        />
-      </template>
-    </BaseInput>
-  </BaseInputGroup>
-
-  <!-- Mailgun Endpoint -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.endpoint`)"
-    :error="v$.endpoint.$error && v$.endpoint.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model.trim="mailSenderStore.mailgunConfig.endpoint"
-      type="text"
-      :invalid="v$.endpoint.$error"
-      @input="v$.endpoint.$touch()"
-    />
-  </BaseInputGroup>
-</template>
-
-<script setup>
-import { computed, ref } from "vue"
-import { useI18n } from "vue-i18n"
-import { required, email, numeric, helpers } from "@vuelidate/validators"
-import { useVuelidate } from "@vuelidate/core"
-
-const pre_t = "settings.mail_sender.mailgun_config"
-const { t } = useI18n()
-
-const props = defineProps({
-  mailSenderStore: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-})
-
-let isShowPassword = ref(false)
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return "text"
-  }
-  return "password"
-})
-
-const rules = computed(() => {
-  return {
-    domain: {
-      required: helpers.withMessage(t("validation.required"), required),
-    },
-    endpoint: {
-      required: helpers.withMessage(t("validation.required"), required),
-    },
-    secret: {
-      required: helpers.withMessage(t("validation.required"), required),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => props.mailSenderStore.mailgunConfig)
-)
-</script>

resources/scripts/admin/views/settings/mail-sender/SesDriver.vue

@@ -1,143 +0,0 @@
-<template>
-  <!-- Host -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.host`)"
-    :error="v$.host.$error && v$.host.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model.trim="mailSenderStore.sesConfig.host"
-      :invalid="v$.host.$error"
-      type="text"
-      @input="v$.host.$touch()"
-    />
-  </BaseInputGroup>
-
-  <!-- Port -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.port`)"
-    :error="v$.port.$error && v$.port.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model.trim="mailSenderStore.sesConfig.port"
-      type="text"
-      :invalid="v$.port.$error"
-      @input="v$.port.$touch()"
-    />
-  </BaseInputGroup>
-
-  <!-- Encryption -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.encryption`)"
-    :error="v$.encryption.$error && v$.encryption.$errors[0].$message"
-    required
-  >
-    <BaseMultiselect
-      v-model.trim="mailSenderStore.sesConfig.encryption"
-      :options="encryptions"
-      :searchable="true"
-      :show-labels="false"
-      :placeholder="$t('general.select_option')"
-      :invalid="v$.encryption.$error"
-      @input="v$.encryption.$touch()"
-    />
-  </BaseInputGroup>
-
-  <!-- SES Key -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.ses_key`)"
-    :error="v$.ses_key.$error && v$.ses_key.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model.trim="mailSenderStore.sesConfig.ses_key"
-      type="text"
-      :invalid="v$.ses_key.$error"
-      @input="v$.ses_key.$touch()"
-    />
-  </BaseInputGroup>
-
-  <!-- SES Secret -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.ses_secret`)"
-    :error="v$.ses_secret.$error && v$.ses_secret.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model="mailSenderStore.sesConfig.ses_secret"
-      :type="getInputType"
-      autocomplete="off"
-      :invalid="v$.ses_secret.$error"
-      @input="v$.ses_secret.$touch()"
-    >
-      <template #right>
-        <BaseIcon
-          v-if="isShowPassword"
-          class="mr-1 text-gray-500 cursor-pointer"
-          name="EyeOffIcon"
-          @click="isShowPassword = !isShowPassword"
-        />
-        <BaseIcon
-          v-else
-          class="mr-1 text-gray-500 cursor-pointer"
-          name="EyeIcon"
-          @click="isShowPassword = !isShowPassword"
-        />
-      </template>
-    </BaseInput>
-  </BaseInputGroup>
-</template>
-
-<script setup>
-import { computed, ref, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, email, numeric, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-
-const pre_t = 'settings.mail_sender.ses_config'
-const { t } = useI18n()
-
-const props = defineProps({
-  mailSenderStore: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-})
-
-let isShowPassword = ref(false)
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-const encryptions = props.mailSenderStore.mail_encryptions
-
-const rules = computed(() => {
-  return {
-    host: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    port: {
-      required: helpers.withMessage(t('validation.required'), required),
-      numeric,
-    },
-    encryption: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    ses_key: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    ses_secret: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => props.mailSenderStore.sesConfig)
-)
-</script>

resources/scripts/admin/views/settings/mail-sender/SmtpDriver.vue

@@ -1,120 +0,0 @@
-<template>
-  <!-- Host -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.host`)"
-    :error="v$.host.$error && v$.host.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model.trim="mailSenderStore.smtpConfig.host"
-      :invalid="v$.host.$error"
-      type="text"
-      @input="v$.host.$touch()"
-    />
-  </BaseInputGroup>
-
-  <!-- Port -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.port`)"
-    :error="v$.port.$error && v$.port.$errors[0].$message"
-    required
-  >
-    <BaseInput
-      v-model.trim="mailSenderStore.smtpConfig.port"
-      type="text"
-      :invalid="v$.port.$error"
-      @input="v$.port.$touch()"
-    />
-  </BaseInputGroup>
-
-  <!-- Username -->
-  <BaseInputGroup :label="$t(`${pre_t}.username`)">
-    <BaseInput v-model.trim="mailSenderStore.smtpConfig.username" type="text" />
-  </BaseInputGroup>
-
-  <!-- Password -->
-  <BaseInputGroup :label="$t(`${pre_t}.password`)">
-    <BaseInput
-      v-model="mailSenderStore.smtpConfig.password"
-      :type="getInputType"
-    >
-      <template #right>
-        <BaseIcon
-          v-if="isShowPassword"
-          class="mr-1 text-gray-500 cursor-pointer"
-          name="EyeOffIcon"
-          @click="isShowPassword = !isShowPassword"
-        />
-        <BaseIcon
-          v-else
-          class="mr-1 text-gray-500 cursor-pointer"
-          name="EyeIcon"
-          @click="isShowPassword = !isShowPassword"
-        />
-      </template>
-    </BaseInput>
-  </BaseInputGroup>
-
-  <!-- Encryption -->
-  <BaseInputGroup
-    :label="$t(`${pre_t}.encryption`)"
-    :error="v$.encryption.$error && v$.encryption.$errors[0].$message"
-    required
-  >
-    <BaseMultiselect
-      v-model.trim="mailSenderStore.smtpConfig.encryption"
-      :options="encryptions"
-      :searchable="true"
-      :show-labels="false"
-      :placeholder="$t('general.select_option')"
-      :invalid="v$.encryption.$error"
-      @input="v$.encryption.$touch()"
-    />
-  </BaseInputGroup>
-</template>
-
-<script setup>
-import { computed, ref, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, numeric, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-
-const pre_t = 'settings.mail_sender.smtp_config'
-const { t } = useI18n()
-
-const props = defineProps({
-  mailSenderStore: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-})
-let isShowPassword = ref(false)
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-const encryptions = props.mailSenderStore.mail_encryptions
-
-const rules = computed(() => {
-  return {
-    host: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    port: {
-      required: helpers.withMessage(t('validation.required'), required),
-      numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
-    },
-    encryption: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => props.mailSenderStore.smtpConfig)
-)
-</script>

resources/scripts/admin/views/users/Create.vue

@@ -162,7 +162,7 @@
 </template>
 
 <script setup>
-import { ref, computed, reactive, onMounted } from 'vue'
+import { ref, computed, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import {

resources/scripts/components/CompanySwitcher.vue

@@ -50,20 +50,20 @@
             pb-4
           "
         >
-          <label
+          <BaseLabel
             class="
-              px-3
+              !px-3
-              py-2
+              !py-2
-              text-xs
+              !text-xs
-              font-semibold
+              !font-semibold
-              text-gray-400
+              !text-gray-400
-              mb-0.5
+              !mb-0.5
-              block
+              !block
-              uppercase
+              !uppercase
             "
           >
             {{ $t('company_switcher.label') }}
-          </label>
+          </BaseLabel>
 
           <div
             v-if="companyStore.companies.length < 1"

resources/scripts/components/GlobalSearchBar.vue

@@ -62,9 +62,9 @@
         </div>
         <div v-else>
           <div v-if="usersStore.customerList.length > 0">
-            <label class="text-sm text-gray-400 mb-0.5 block px-2 uppercase">
+            <BaseLabel class="!text-gray-400 !mb-0.5 !block !px-2 !uppercase">
               {{ $t('global_search.customers') }}
-            </label>
+            </BaseLabel>
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
@@ -108,11 +108,11 @@
           </div>
 
           <div v-if="usersStore.userList.length > 0" class="mt-2">
-            <label
+            <BaseLabel
-              class="text-sm text-gray-400 mb-2 block px-2 mb-0.5 uppercase"
+              class="!text-gray-400 !mb-2 !block !px-2 !uppercase"
             >
               {{ $t('global_search.users') }}
-            </label>
+            </BaseLabel>
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"

resources/scripts/components/LightDarkSwitcher.vue

@@ -0,0 +1,101 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<script lang="ts" setup>
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
+import { computed, ref } from 'vue'
+defineProps({
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const globalStore = useGlobalStore()
+
+const enabled = ref(
+  localStorage.getItem('theme') === 'dark' ||
+    document.documentElement.classList.contains('dark')
+)
+
+globalStore.isDarkModeOn = enabled
+
+function onChange(val) {
+  if (val) {
+    localStorage.theme = 'dark'
+    document.documentElement.classList.add('dark')
+    document.documentElement.style.setProperty('color-scheme', 'dark')
+    globalStore.isDarkModeOn = true
+  } else {
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+    document.documentElement.style.setProperty('color-scheme', 'light')
+    globalStore.isDarkModeOn = false
+  }
+}
+</script>
+
+<template>
+  <div class="w-full flex justify-center">
+    <SwitchGroup
+      as="div"
+      class="flex items-center"
+      :class="vertical ? 'flex-col justify-center' : 'flex-row'"
+    >
+      <Switch
+        v-model="enabled"
+        class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-gray-700"
+        :class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
+        @update:modelValue="onChange"
+      >
+        <span class="sr-only">Use setting</span>
+        <span
+          class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+          :class="[enabled ? 'translate-x-5' : 'translate-x-0']"
+        >
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-0 ease-out duration-100'
+                : 'opacity-100 ease-in duration-200',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-yellow-500" name="SunIcon" />
+          </span>
+          <span
+            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+            :class="[
+              enabled
+                ? 'opacity-100 ease-in duration-200'
+                : 'opacity-0 ease-out duration-100',
+            ]"
+            aria-hidden="true"
+          >
+            <BaseIcon class="h-3 w-3 text-primary-500" name="MoonIcon" />
+          </span>
+        </span>
+      </Switch>
+      <SwitchLabel
+        v-if="showLabel"
+        as="span"
+        class="cursor-pointer"
+        :class="vertical ? 'px-1 text-center mt-2' : 'ml-3'"
+      >
+        <span
+          v-if="enabled"
+          class="text-sm font-medium text-gray-500 dark:text-gray-400"
+        >
+          Dark Mode
+        </span>
+        <span v-else class="text-sm font-medium text-gray-500">
+          Light Mode
+        </span>
+      </SwitchLabel>
+    </SwitchGroup>
+  </div>
+</template>

resources/scripts/components/base/BaseCheckbox.vue

@@ -15,7 +15,7 @@
         v-if="label"
         :for="id"
         :class="`font-medium ${
-          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
         } cursor-pointer `"
       >
         {{ label }}

resources/scripts/components/base/BaseCustomInput.vue

@@ -126,7 +126,7 @@ onMounted(() => {
 })
 
 const value = computed({
-  get: () => props.modelValue,
+  get: () => (props.modelValue ? props.modelValue : ''),
   set: (value) => {
     emit('update:modelValue', value)
   },
@@ -195,7 +195,9 @@ async function getFields() {
           { label: 'Date', value: 'INVOICE_DATE' },
           { label: 'Due Date', value: 'INVOICE_DUE_DATE' },
           { label: 'Number', value: 'INVOICE_NUMBER' },
-          { label: 'Ref Number', value: 'INVOICE_REF_NUMBER' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
+          { label: 'Due Amount', value: 'DUE_AMOUNT' },
+          { label: 'Total Amount', value: 'TOTAL_AMOUNT' },
           ...invoiceFields.value.map((i) => ({
             label: i.label,
             value: i.slug,
@@ -211,7 +213,8 @@ async function getFields() {
           { label: 'Date', value: 'ESTIMATE_DATE' },
           { label: 'Expiry Date', value: 'ESTIMATE_EXPIRY_DATE' },
           { label: 'Number', value: 'ESTIMATE_NUMBER' },
-          { label: 'Ref Number', value: 'ESTIMATE_REF_NUMBER' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
+          { label: 'Total Amount', value: 'TOTAL_AMOUNT' },
           ...estimateFields.value.map((i) => ({
             label: i.label,
             value: i.slug,
@@ -228,6 +231,7 @@ async function getFields() {
           { label: 'Number', value: 'PAYMENT_NUMBER' },
           { label: 'Mode', value: 'PAYMENT_MODE' },
           { label: 'Amount', value: 'PAYMENT_AMOUNT' },
+          { label: 'PDF Link', value: 'PDF_LINK' },
           ...paymentFields.value.map((i) => ({
             label: i.label,
             value: i.slug,

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -69,31 +69,29 @@
       </div>
       <div class="grid grid-cols-2 gap-8 mt-2">
         <div v-if="selectedCustomer.billing" class="flex flex-col">
-          <label
+          <BaseLabel
             class="
-              mb-1
+              !mb-1
-              text-sm
+              !text-left !text-gray-400
-              font-medium
+              !uppercase
-              text-left text-gray-400
+              !whitespace-nowrap
-              uppercase
-              whitespace-nowrap
             "
           >
             {{ $t('general.bill_to') }}
-          </label>
+          </BaseLabel>
 
           <div
             v-if="selectedCustomer.billing"
             class="flex flex-col flex-1 p-0 text-left"
           >
-            <label
+            <BaseLabel
               v-if="selectedCustomer.billing.name"
-              class="relative w-11/12 text-sm truncate"
+              class="!relative !w-11/12 !truncate"
             >
               {{ selectedCustomer.billing.name }}
-            </label>
+            </BaseLabel>
 
-            <label class="relative w-11/12 text-sm truncate">
+            <BaseLabel class="!relative !w-11/12  !truncate">
               <span v-if="selectedCustomer.billing.city">
                 {{ selectedCustomer.billing.city }}
               </span>
@@ -108,42 +106,40 @@
               <span v-if="selectedCustomer.billing.state">
                 {{ selectedCustomer.billing.state }}
               </span>
-            </label>
+            </BaseLabel>
-            <label
+            <BaseLabel
               v-if="selectedCustomer.billing.zip"
-              class="relative w-11/12 text-sm truncate"
+              class="!relative !w-11/12 !truncate"
             >
               {{ selectedCustomer.billing.zip }}
-            </label>
+            </BaseLabel>
           </div>
         </div>
 
         <div v-if="selectedCustomer.shipping" class="flex flex-col">
-          <label
+          <BaseLabel
             class="
-              mb-1
+              !mb-1
-              text-sm
+              !text-left !text-gray-400
-              font-medium
+              !uppercase
-              text-left text-gray-400
+              !whitespace-nowrap
-              uppercase
-              whitespace-nowrap
             "
           >
             {{ $t('general.ship_to') }}
-          </label>
+          </BaseLabel>
 
           <div
             v-if="selectedCustomer.shipping"
             class="flex flex-col flex-1 p-0 text-left"
           >
-            <label
+            <BaseLabel
               v-if="selectedCustomer.shipping.name"
-              class="relative w-11/12 text-sm truncate"
+              class="!relative !w-11/12 !truncate"
             >
               {{ selectedCustomer.shipping.name }}
-            </label>
+            </BaseLabel>
 
-            <label class="relative w-11/12 text-sm truncate">
+            <BaseLabel class="!relative !w-11/12 !truncate">
               <span v-if="selectedCustomer.shipping.city">
                 {{ selectedCustomer.shipping.city }}
               </span>
@@ -158,13 +154,13 @@
               <span v-if="selectedCustomer.shipping.state">
                 {{ selectedCustomer.shipping.state }}
               </span>
-            </label>
+            </BaseLabel>
-            <label
+            <BaseLabel
               v-if="selectedCustomer.shipping.zip"
-              class="relative w-11/12 text-sm truncate"
+              class="!relative !w-11/12 !text-sm !truncate"
             >
               {{ selectedCustomer.shipping.zip }}
-            </label>
+            </BaseLabel>
           </div>
         </div>
       </div>
@@ -211,7 +207,7 @@
           />
 
           <div class="mt-1">
-            <label class="text-lg font-medium text-gray-900">
+            <label class="text-lg font-medium text-gray-900 dark:text-white">
               {{ $t('customers.new_customer') }}
               <span class="text-red-500"> * </span>
             </label>
@@ -335,9 +331,9 @@
                   v-if="customerStore.customers.length === 0"
                   class="flex justify-center p-5 text-gray-400"
                 >
-                  <label class="text-base text-gray-500 cursor-pointer">
+                  <BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
                     {{ $t('customers.no_customers_found') }}
-                  </label>
+                  </BaseLabel>
                 </div>
               </ul>
             </div>
@@ -362,19 +358,18 @@
             >
               <BaseIcon name="UserAddIcon" class="text-primary-400" />
 
-              <label
+              <BaseLabel
                 class="
-                  m-0
+                  !m-0
-                  ml-3
+                  !ml-3
-                  text-sm
+                  !leading-none
-                  leading-none
+                  !cursor-pointer
-                  cursor-pointer
+                  !font-base
-                  font-base
+                  !text-primary-400
-                  text-primary-400
                 "
               >
                 {{ $t('customers.add_new_customer') }}
-              </label>
+              </BaseLabel>
             </button>
           </PopoverPanel>
         </div>

resources/scripts/components/base/BaseDatePicker.vue

@@ -7,52 +7,108 @@
     />
   </BaseContentPlaceholders>
 
-  <div v-else :class="computedContainerClass" class="relative flex flex-row">
+  <div v-else :class="computedContainerClass">
-    <svg
+    <date-picker
-      v-if="showCalendarIcon && !hasIconSlot"
+      ref="vCalendar"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-      class="
-        absolute
-        w-4
-        h-4
-        mx-2
-        my-2.5
-        text-sm
-        not-italic
-        font-black
-        text-gray-400
-        cursor-pointer
-      "
-      @click="onClickDp"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-        clip-rule="evenodd"
-      ></path>
-    </svg>
-
-    <slot v-if="showCalendarIcon && hasIconSlot" name="icon" />
-
-    <FlatPickr
-      ref="dp"
       v-model="date"
-      v-bind="$attrs"
+      :mode="mode"
-      :disabled="disabled"
+      :is24hr="time24hr"
-      :config="config"
+      class="w-full"
-      :class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
+      color="indigo"
-    />
+      :input-debounce="500"
+      :update-on-input="false"
+      :is-range="false"
+      trim-weeks
+      :is-required="isRequired"
+      :popover="{
+        visibility: disabled ? 'hidden' : 'focus',
+        showDelay: 0,
+        hideDelay: 1,
+      }"
+      :attributes="attrs"
+      :model-config="config"
+      :masks="masks"
+      :locale="global.locale"
+    >
+      <template
+        #default="{ inputValue, inputEvents, togglePopover, hidePopover }"
+      >
+        <!-- calendar icon -->
+        <svg
+          v-if="showCalendarIcon && !hasIconSlot"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="
+            absolute
+            w-4
+            h-4
+            mx-2
+            my-2.5
+            text-sm
+            not-italic
+            font-black
+            text-gray-400
+            cursor-pointer
+          "
+          @click="togglePopover()"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+
+        <slot v-if="showCalendarIcon && hasIconSlot" name="icon" />
+
+        <input
+          :value="inputValue"
+          :class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
+          readonly
+          v-on="inputEvents"
+          @blur="hidePopover()"
+        />
+      </template>
+
+      <template v-if="showExtraOptions" #footer>
+        <div
+          class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
+        >
+          <button type="button" class="extra-button" @click="moveToDate(sourceDate)">
+            {{ global.t('date_picker.same_day') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(7)">
+            {{ global.t('date_picker.within_7_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(15)">
+            {{ global.t('date_picker.within_15_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(30)">
+            {{ global.t('date_picker.within_30_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(45)">
+            {{ global.t('date_picker.within_45_days') }}
+          </button>
+
+          <button type="button" class="extra-button" @click="withInDays(60)">
+            {{ global.t('date_picker.within_60_days') }}
+          </button>
+        </div>
+      </template>
+    </date-picker>
   </div>
 </template>
 
 <script type="text/babel" setup>
-import FlatPickr from 'vue-flatpickr-component'
+import { Calendar, DatePicker } from 'v-calendar'
-import 'flatpickr/dist/flatpickr.css'
+import 'v-calendar/dist/style.css'
 import { computed, reactive, watch, ref, useSlots } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
-
+import moment from 'moment'
-const dp = ref(null)
 
 const props = defineProps({
   modelValue: {
@@ -90,36 +146,31 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   time24hr: {
     type: Boolean,
     default: false,
   },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+  showExtraOptions: {
+    type: Boolean,
+    default: false,
+  },
+  sourceDate: {
+    type: [String, Date],
+    default: () => new Date(),
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
-
 const slots = useSlots()
-
 const companyStore = useCompanyStore()
-
+const { global } = window.i18n
-let config = reactive({
+const vCalendar = ref(null)
-  altInput: true,
-  enableTime: props.enableTime,
-  time_24hr: props.time24hr,
-})
-
-const date = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-
-const carbonFormat = computed(() => {
-  return companyStore.selectedCompanySettings?.carbon_date_format
-})
 
 const hasIconSlot = computed(() => {
   return !!slots.icon
@@ -135,7 +186,6 @@ const inputInvalidClass = computed(() => {
   if (props.invalid) {
     return 'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400'
   }
-
   return ''
 })
 
@@ -143,35 +193,97 @@ const inputDisabledClass = computed(() => {
   if (props.disabled) {
     return 'border border-solid rounded-md outline-none input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-200 text-gray-600 border-gray-200'
   }
-
   return ''
 })
 
-function onClickDp(params) {
+// to convert YYYY-MM-DD | YYYY-MM-DD HH:mm format
-  dp.value.fp.open()
+function convertYMDFormat(date) {
+  let format = props.enableTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'
+  return date ? moment(date).format(format) : date
 }
 
-watch(
+const date = computed({
-  () => props.enableTime,
+  get: () => props.modelValue,
-  (val) => {
+  set: (value) => {
-    if (props.enableTime) {
+    emit('update:modelValue', value)
-      config.enableTime = props.enableTime
-    }
   },
-  { immediate: true }
+})
-)
+
+const mode = computed(() => {
+  return props.enableTime ? 'dateTime' : 'date'
+})
+
+const config = reactive({
+  type: 'string',
+  mask: 'YYYY-MM-DD', // Uses 'iso' if missing
+  //timeAdjust: '00:00:00',
+})
+
+const masks = reactive({
+  input: null,
+  inputDateTime: null,
+  inputDateTime24hr: null,
+})
+
+const attrs = reactive([
+  {
+    dates: new Date(),
+    highlight: {
+      fillMode: 'outline',
+    },
+    /* popover: {
+      label: 'Today Date',
+      visibility: 'hover',
+    }, */
+  },
+])
+
+const carbonFormat = computed(() => {
+  return companyStore.selectedCompanySettings?.moment_date_format
+})
 
 watch(
   () => carbonFormat,
   () => {
     if (!props.enableTime) {
-      config.altFormat = carbonFormat.value ? carbonFormat.value : 'd M Y'
+      masks.input = carbonFormat.value ? carbonFormat.value : 'DD MMM YYYY'
+      config.mask = 'YYYY-MM-DD'
     } else {
-      config.altFormat = carbonFormat.value
+      let timeFormat = 'HH:mm'
-        ? `${carbonFormat.value} H:i `
+      if (props.time24hr) {
-        : 'd M Y H:i'
+        masks.inputDateTime24hr = carbonFormat.value
+          ? `${carbonFormat.value} ${timeFormat}`
+          : `DD MMM YYYY ${timeFormat}`
+      } else {
+        masks.inputDateTime = carbonFormat.value
+          ? `${carbonFormat.value} ${timeFormat}`
+          : `DD MMM YYYY ${timeFormat}`
+      }
+      config.mask = `YYYY-MM-DD ${timeFormat}`
     }
   },
   { immediate: true }
 )
+
+async function moveToDate(_date) {
+  const calendar = vCalendar.value
+  _date = _date ? _date : convertYMDFormat(new Date())
+  date.value = _date
+  // await calendar.move(_date)
+  calendar.hidePopover()
+}
+
+async function withInDays(noOfDays) {
+  if (!noOfDays) return false
+
+  let newDate = moment(props.sourceDate).add(noOfDays, 'days').toDate()
+  newDate = convertYMDFormat(newDate)
+  moveToDate(newDate)
+}
 </script>
+
+<style scoped>
+.extra-button {
+  @apply bg-primary-500 text-white text-sm font-semibold px-2 py-1 rounded hover:bg-primary-700;
+}
+</style>