ismail/haikal
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update on the lead & opportunity

Browse Source
This commit is contained in:
ismail 2025-05-15 19:29:22 +03:00
parent cca37be3b3
commit 2ee9a86720
223 changed files with 15974 additions and 15114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.prettierrc Normal file
View File

@ -0,0 +1,10 @@
{
"printWidth": 80,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always"
}

61
inventory/forms.py
View File

@ -50,7 +50,8 @@ from .models import (
CarMake,
Customer,
Organization,
DealerSettings
DealerSettings,
Tasks
)
from django_ledger import models as ledger_models
from django.forms import (
@ -1120,6 +1121,7 @@ class ActivityForm(forms.ModelForm):
associated with the form and the fields it comprises.
:type Meta: type
"""
activity_type = forms.ChoiceField(choices=[("call", "Call"), ("email", "Email"), ("meeting", "Meeting")])
class Meta:
model = Activity
fields = ["activity_type", "notes"]
@ -1140,9 +1142,34 @@ class OpportunityForm(forms.ModelForm):
:ivar Meta.fields: List of fields from the model included in the form.
:type Meta.fields: list
"""
closing_date = forms.DateField(
label=_("Expected Closing Date"),
widget=forms.DateInput(attrs={"type": "date"})
)
probability = forms.IntegerField(
label=_("Probability (%)"),
widget=forms.NumberInput(attrs={
'type': 'range',
'min': '0',
'max': '100',
'step': '1',
'class': 'form-range',
'oninput': 'this.nextElementSibling.value = this.value'
}),
initial=50 # Default value
)
class Meta:
model = Opportunity
fields = ["customer", "car", "stage", "probability", "staff", "closing_date"]
fields = ["lead", "car", "stage", "probability", "expected_revenue", "closing_date"]
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
# Add a visible number input to display the current value
self.fields['probability'].widget.attrs['class'] = 'd-none' # Hide the default input
if self.instance and self.instance.pk:
self.fields['probability'].initial = self.instance.probability
class InvoiceModelCreateForm(InvoiceModelCreateFormBase):
@ -1684,3 +1711,33 @@ class PaymentPlanForm(forms.Form):
self.fields['first_name'].initial = user.first_name
self.fields['last_name'].initial = user.last_name
self.fields['email'].initial = user.email
# class ActivityHistoryForm(forms.Form):
# activity_type = forms.ChoiceField(
# choices=[
# ('note', 'Note'),
# ('call', 'Call'),
# ('email', 'Email'),
# ('meeting', 'Meeting'),],
# widget=forms.Select(attrs={
# 'class': 'form-control',
# 'id': 'activity-type'
# }),
# label=_('Activity Type')
# )
# description = forms.CharField(
# widget=forms.Textarea(attrs={
# 'class': 'form-control',
# 'id': 'activity-description'
# }),
# label=_('Description')
# )
class StaffTaskForm(forms.ModelForm):
class Meta:
model = Tasks
fields = ['title','due_date' ,'description']
widgets = {
'due_date': forms.DateTimeInput(attrs={'type': 'date'}),
}

44
inventory/migrations/0018_remove_opportunity_closed_remove_opportunity_status_and_more.py Normal file
View File

@ -0,0 +1,44 @@
# Generated by Django 5.1.7 on 2025-05-13 15:19
import django.db.models.deletion
from django.conf import settings
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('contenttypes', '0002_remove_content_type_name'),
('inventory', '0017_alter_activity_activity_type'),
migrations.swappable_dependency(settings.AUTH_USER_MODEL),
]
operations = [
migrations.RemoveField(
model_name='opportunity',
name='closed',
),
migrations.RemoveField(
model_name='opportunity',
name='status',
),
migrations.CreateModel(
name='Tasks',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('object_id', models.UUIDField()),
('title', models.CharField(max_length=255, verbose_name='Title')),
('description', models.TextField(blank=True, null=True, verbose_name='Description')),
('due_date', models.DateField(verbose_name='Due Date')),
('created', models.DateTimeField(auto_now_add=True, verbose_name='Created')),
('updated', models.DateTimeField(auto_now=True, verbose_name='Updated')),
('assigned_to', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.DO_NOTHING, related_name='tasks_assigned', to=settings.AUTH_USER_MODEL)),
('content_type', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='contenttypes.contenttype')),
('created_by', models.ForeignKey(on_delete=django.db.models.deletion.DO_NOTHING, related_name='tasks_created', to=settings.AUTH_USER_MODEL)),
],
options={
'verbose_name': 'Task',
'verbose_name_plural': 'Tasks',
},
),
]

20
inventory/migrations/0019_tasks_dealer.py Normal file
View File

@ -0,0 +1,20 @@
# Generated by Django 5.1.7 on 2025-05-13 16:22
import django.db.models.deletion
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('inventory', '0018_remove_opportunity_closed_remove_opportunity_status_and_more'),
]
operations = [
migrations.AddField(
model_name='tasks',
name='dealer',
field=models.ForeignKey(default=1, on_delete=django.db.models.deletion.CASCADE, related_name='tasks', to='inventory.dealer'),
preserve_default=False,
),
]

18
inventory/migrations/0020_tasks_completed.py Normal file
View File

@ -0,0 +1,18 @@
# Generated by Django 5.1.7 on 2025-05-13 16:57
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('inventory', '0019_tasks_dealer'),
]
operations = [
migrations.AddField(
model_name='tasks',
name='completed',
field=models.BooleanField(default=False, verbose_name='Completed'),
),
]

28
inventory/migrations/0021_alter_lead_status_alter_leadstatushistory_new_status_and_more.py Normal file
View File

@ -0,0 +1,28 @@
# Generated by Django 5.1.7 on 2025-05-14 10:29
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('inventory', '0020_tasks_completed'),
]
operations = [
migrations.AlterField(
model_name='lead',
name='status',
field=models.CharField(choices=[('new', 'New'), ('follow_up', 'Follow-up'), ('negotiation', 'Negotiation'), ('won', 'Won'), ('lost', 'Lost'), ('closed', 'Closed')], db_index=True, default='new', max_length=50, verbose_name='Status'),
),
migrations.AlterField(
model_name='leadstatushistory',
name='new_status',
field=models.CharField(choices=[('new', 'New'), ('follow_up', 'Follow-up'), ('negotiation', 'Negotiation'), ('won', 'Won'), ('lost', 'Lost'), ('closed', 'Closed')], max_length=50, verbose_name='New Status'),
),
migrations.AlterField(
model_name='leadstatushistory',
name='old_status',
field=models.CharField(choices=[('new', 'New'), ('follow_up', 'Follow-up'), ('negotiation', 'Negotiation'), ('won', 'Won'), ('lost', 'Lost'), ('closed', 'Closed')], max_length=50, verbose_name='Old Status'),
),
]

19
inventory/migrations/0022_opportunity_expected_revenue.py Normal file
View File

@ -0,0 +1,19 @@
# Generated by Django 5.1.7 on 2025-05-14 10:41
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('inventory', '0021_alter_lead_status_alter_leadstatushistory_new_status_and_more'),
]
operations = [
migrations.AddField(
model_name='opportunity',
name='expected_revenue',
field=models.DecimalField(decimal_places=2, default=0, max_digits=10, verbose_name='Expected Revenue'),
preserve_default=False,
),
]

18
inventory/migrations/0023_alter_opportunity_stage.py Normal file
View File

@ -0,0 +1,18 @@
# Generated by Django 5.1.7 on 2025-05-14 10:58
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('inventory', '0022_opportunity_expected_revenue'),
]
operations = [
migrations.AlterField(
model_name='opportunity',
name='stage',
field=models.CharField(choices=[('discovery', 'Discovery'), ('proposal', 'Proposal'), ('negotiation', 'Negotiation'), ('closed_won', 'Closed Won'), ('closed_lost', 'Closed Lost')], max_length=20, verbose_name='Stage'),
),
]

20
inventory/migrations/0024_alter_opportunity_customer.py Normal file
View File

@ -0,0 +1,20 @@
# Generated by Django 5.1.7 on 2025-05-14 10:59
import django.db.models.deletion
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('django_ledger', '0021_alter_bankaccountmodel_account_model_and_more'),
('inventory', '0023_alter_opportunity_stage'),
]
operations = [
migrations.AlterField(
model_name='opportunity',
name='customer',
field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='opportunities', to='django_ledger.customermodel'),
),
]

45
inventory/models.py
View File

@ -973,9 +973,9 @@ class Channel(models.TextChoices):
class Status(models.TextChoices):
NEW = "new", _("New")
FOLLOW_UP = "follow_up", _("Needs Follow-up")
NEGOTIATION = "negotiation", _("Under Negotiation")
WON = "won", _("Converted")
FOLLOW_UP = "follow_up", _("Follow-up")
NEGOTIATION = "negotiation", _("Negotiation")
WON = "won", _("Won")
LOST = "lost", _("Lost")
CLOSED = "closed", _("Closed")
@ -1020,7 +1020,7 @@ class ActionChoices(models.TextChoices):
class Stage(models.TextChoices):
PROSPECT = "prospect", _("Prospect")
DISCOVERY = "discovery", _("Discovery")
PROPOSAL = "proposal", _("Proposal")
NEGOTIATION = "negotiation", _("Negotiation")
CLOSED_WON = "closed_won", _("Closed Won")
@ -1515,7 +1515,7 @@ class Opportunity(models.Model):
Dealer, on_delete=models.CASCADE, related_name="opportunities"
)
customer = models.ForeignKey(
CustomerModel, on_delete=models.CASCADE, related_name="opportunities"
CustomerModel, on_delete=models.CASCADE, related_name="opportunities",null=True,blank=True
)
car = models.ForeignKey(
Car, on_delete=models.SET_NULL, null=True, blank=True, verbose_name=_("Car")
@ -1523,12 +1523,6 @@ class Opportunity(models.Model):
stage = models.CharField(
max_length=20, choices=Stage.choices, verbose_name=_("Stage")
)
status = models.CharField(
max_length=20,
choices=Status.choices,
verbose_name=_("Status"),
default=Status.NEW,
)
staff = models.ForeignKey(
Staff,
on_delete=models.SET_NULL,
@ -1538,10 +1532,12 @@ class Opportunity(models.Model):
)
lead = models.OneToOneField("Lead",related_name="opportunity", on_delete=models.CASCADE,null=True,blank=True)
probability = models.PositiveIntegerField(validators=[validate_probability])
expected_revenue = models.DecimalField(
max_digits=10, decimal_places=2, verbose_name=_("Expected Revenue")
)
closing_date = models.DateField(verbose_name=_("Closing Date"),null=True,blank=True)
created = models.DateTimeField(auto_now_add=True, verbose_name=_("Created"))
updated = models.DateTimeField(auto_now=True, verbose_name=_("Updated"))
closed = models.BooleanField(default=False, verbose_name=_("Closed"))
estimate = models.OneToOneField(EstimateModel, related_name="opportunity",on_delete=models.SET_NULL,null=True,blank=True)
class Meta:
verbose_name = _("Opportunity")
@ -1569,6 +1565,31 @@ class Notes(models.Model):
def __str__(self):
return f"Note by {self.created_by.first_name} on {self.content_object}"
class Tasks(models.Model):
dealer = models.ForeignKey(Dealer, on_delete=models.CASCADE, related_name="tasks")
content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE)
object_id = models.UUIDField()
content_object = GenericForeignKey("content_type", "object_id")
title = models.CharField(max_length=255, verbose_name=_("Title"))
description = models.TextField(verbose_name=_("Description"),null=True,blank=True)
due_date = models.DateField(verbose_name=_("Due Date"))
completed = models.BooleanField(default=False, verbose_name=_("Completed"))
assigned_to = models.ForeignKey(
User, on_delete=models.DO_NOTHING, related_name="tasks_assigned",null=True,blank=True
)
created_by = models.ForeignKey(
User, on_delete=models.DO_NOTHING, related_name="tasks_created"
)
created = models.DateTimeField(auto_now_add=True, verbose_name=_("Created"))
updated = models.DateTimeField(auto_now=True, verbose_name=_("Updated"))
class Meta:
verbose_name = _("Task")
verbose_name_plural = _("Tasks")
def __str__(self):
return f"Task by {self.created_by.email} on {self.content_object}"
class Email(models.Model):
content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE)
object_id = models.UUIDField()

14
inventory/urls.py
View File

@ -117,8 +117,18 @@ urlpatterns = [
path('crm/leads/<int:pk>/update-note/', views.update_note, name='update_note_to_lead'),
path("crm/leads/<int:pk>/delete-note/", views.delete_note, name="delete_note_to_lead"),
path(
"crm/leads/<int:pk>/add-activity/",
views.add_activity_to_lead,
"crm/<int:pk>/update-task/",
views.update_task,
name="update_task",
),
path(
"crm/<str:content_type>/<int:pk>/add-task/",
views.add_task,
name="add_task",
),
path(
"crm/<str:content_type>/<int:pk>/add-activity/",
views.add_activity,
name="add_activity",
),
path(

2
inventory/utils.py
View File

@ -1362,6 +1362,6 @@ def handle_payment(request,order):
return transaction_url
# def get_user_quota(user):
# return user.dealer.quota

181
inventory/views.py
View File

@ -8,6 +8,7 @@ import numpy as np
# from rich import print
from random import randint
from decimal import Decimal
from django.apps import apps
from datetime import timedelta
from calendar import month_name
from pyzbar.pyzbar import decode
@ -24,7 +25,7 @@ from django.conf import settings
from django.db import transaction
from django.db.models import Func
from django.contrib import messages
from django.http import JsonResponse, HttpResponseForbidden
from django.http import Http404, JsonResponse, HttpResponseForbidden
from django.forms import HiddenInput, ValidationError
from django.shortcuts import HttpResponse
from django.db.models import Sum, F, Count
@ -4580,10 +4581,15 @@ class LeadDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
context["activities"] = models.Activity.objects.filter(
content_type__model="lead", object_id=self.object.id
)
context["tasks"] = models.Tasks.objects.filter(
content_type__model="lead", object_id=self.object.id
)
context["status_history"] = models.LeadStatusHistory.objects.filter(
lead=self.object
)
context["transfer_form"] = forms.LeadTransferForm()
context["activity_form"] = forms.ActivityForm()
context["staff_task_form"] = forms.StaffTaskForm()
return context
@ -4673,10 +4679,10 @@ def lead_create(request):
def lead_tracking(request):
dealer = get_user_type(request)
new = models.Lead.objects.filter(dealer=dealer)
new = models.Lead.objects.filter(dealer=dealer, status="new")
follow_up = models.Lead.objects.filter(dealer=dealer, next_action__in=["call", "meeting"])
won = models.Lead.objects.filter(dealer=dealer, status="won")
lose = models.Lead.objects.filter(dealer=dealer, status="lose")
lose = models.Lead.objects.filter(dealer=dealer, status="lost")
negotiation = models.Lead.objects.filter(dealer=dealer, status="negotiation")
context = {"new": new,"follow_up": follow_up,"won": won,"lose": lose,"negotiation": negotiation}
return render(request, "crm/leads/lead_tracking.html", context)
@ -4687,25 +4693,25 @@ def update_lead_actions(request):
lead_id = request.POST.get('lead_id')
current_action = request.POST.get('current_action')
next_action = request.POST.get('next_action')
next_action_date = request.POST.get('next_action_date')
next_action_date = request.POST.get('next_action_date',None)
action_notes = request.POST.get('action_notes', '')
# Validate required fields
if not all([lead_id, current_action, next_action, next_action_date]):
if not all([lead_id, current_action, next_action]):
return JsonResponse({'success': False, 'message': 'All fields are required'}, status=400)
# Get the lead
lead = models.Lead.objects.get(id=lead_id)
# Update lead fields
lead.action = current_action
lead.status = current_action
lead.next_action = next_action
lead.next_action_date = next_action_date
# Parse the datetime string
try:
next_action_datetime = datetime.strptime(next_action_date, '%Y-%m-%dT%H:%M')
lead.next_action_date = timezone.make_aware(next_action_datetime)
if next_action_date:
lead.next_action_date = next_action_date
next_action_datetime = datetime.strptime(next_action_date, '%Y-%m-%dT%H:%M')
lead.next_action_date = timezone.make_aware(next_action_datetime)
except ValueError:
return JsonResponse({'success': False, 'message': 'Invalid date format'}, status=400)
@ -5060,10 +5066,6 @@ def send_lead_email(request, pk, email_pk=None):
response["HX-Redirect"] = reverse("lead_detail", args=[lead.pk])
return response
lead.status = models.Status.CONTACTED
lead.save()
if request.method == "POST":
email_pk = request.POST.get("email_pk")
if email_pk not in [None, "None", ""]:
@ -5138,11 +5140,16 @@ def add_activity_to_lead(request, pk):
:return: An HTTP response that either renders the form or redirects to the lead detail page
"""
lead = get_object_or_404(models.Lead, pk=pk)
dealer = get_user_type(request)
if request.method == "POST":
form = forms.ActivityForm(request.POST)
if form.is_valid():
activity = form.save(commit=False)
print(activity)
activity.content_object = lead
activity.dealer = dealer
activity.activity_type = form.cleaned_data["activity_type"]
activity.notes = form.cleaned_data["notes"]
activity.created_by = request.user
activity.save()
return redirect("lead_detail", pk=pk)
@ -5151,7 +5158,7 @@ def add_activity_to_lead(request, pk):
return render(request, "crm/add_activity.html", {"form": form, "lead": lead})
class OpportunityCreateView(CreateView, LoginRequiredMixin):
class OpportunityCreateView(CreateView,SuccessMessageMixin, LoginRequiredMixin):
"""
Handles the creation of Opportunity instances through a form while enforcing
specific user access control and initial data population. This view ensures
@ -5173,30 +5180,33 @@ class OpportunityCreateView(CreateView, LoginRequiredMixin):
model = models.Opportunity
form_class = forms.OpportunityForm
template_name = "crm/opportunities/opportunity_form.html"
success_message = "Opportunity created successfully."
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
dealer = get_user_type(self.request)
return context
def get_initial(self):
initial = super().get_initial()
if self.kwargs.get("pk", None):
lead = models.Lead.objects.get(pk=self.kwargs.get("pk"))
# def get_initial(self):
# initial = super().get_initial()
# if self.kwargs.get("pk", None):
# lead = models.Lead.objects.get(pk=self.kwargs.get("pk"))
initial["customer"] = lead.customer
return initial
# initial["customer"] = lead.customer
# return initial
def form_valid(self, form):
dealer = get_user_type(self.request)
form.instance.dealer = dealer
form.instance.customer = form.instance.lead.customer
form.instance.staff = form.instance.lead.staff
return super().form_valid(form)
def get_success_url(self):
return reverse_lazy("opportunity_detail", kwargs={"pk": self.object.pk})
class OpportunityUpdateView(LoginRequiredMixin, UpdateView):
class OpportunityUpdateView(LoginRequiredMixin,SuccessMessageMixin, UpdateView):
"""
Handles the update functionality for Opportunity objects.
@ -5221,6 +5231,7 @@ class OpportunityUpdateView(LoginRequiredMixin, UpdateView):
model = models.Opportunity
form_class = forms.OpportunityForm
template_name = "crm/opportunities/opportunity_form.html"
success_message = "Opportunity updated successfully."
def get_success_url(self):
return reverse_lazy("opportunity_detail", kwargs={"pk": self.object.pk})
@ -5252,7 +5263,6 @@ class OpportunityDetailView(LoginRequiredMixin, DetailView):
url = reverse("opportunity_update_status", args=[self.object.pk])
form.fields["status"].widget.attrs["hx-get"] = url
form.fields["stage"].widget.attrs["hx-get"] = url
form.fields["status"].initial = self.object.status
form.fields["stage"].initial = self.object.stage
context["status_form"] = form
context["notes"] = models.Notes.objects.filter(
@ -5272,25 +5282,6 @@ class OpportunityDetailView(LoginRequiredMixin, DetailView):
class OpportunityListView(LoginRequiredMixin, ListView):
"""
View for displaying a paginated list of opportunities.
This class-based view inherits from `LoginRequiredMixin` and `ListView` to
provide a view rendering a list of `Opportunity` objects associated with
the current dealer. It ensures the user is authenticated before providing
access to the opportunity list and adds filtering based on the dealer
associated with the request.
:ivar model: The model used to retrieve opportunities.
:type model: models.Opportunity
:ivar template_name: The template used to render the opportunities list.
:type template_name: str
:ivar context_object_name: The context variable name for the list of
opportunities in the template.
:type context_object_name: str
:ivar paginate_by: The number of opportunities displayed per page.
:type paginate_by: int
"""
model = models.Opportunity
template_name = "crm/opportunities/opportunity_list.html"
context_object_name = "opportunities"
@ -5298,9 +5289,38 @@ class OpportunityListView(LoginRequiredMixin, ListView):
def get_queryset(self):
dealer = get_user_type(self.request)
return models.Opportunity.objects.filter(dealer=dealer).all()
queryset = models.Opportunity.objects.filter(dealer=dealer)
# Search filter
search = self.request.GET.get('search')
if search:
queryset = queryset.filter(
Q(customer__customer_name__icontains=search) |
Q(customer__email__icontains=search))
# Stage filter
stage = self.request.GET.get('stage')
if stage:
queryset = queryset.filter(stage=stage)
# Sorting
sort = self.request.GET.get('sort', 'newest')
if sort == 'newest':
queryset = queryset.order_by('-created')
elif sort == 'highest':
queryset = queryset.order_by('-expected_revenue')
elif sort == 'closing':
queryset = queryset.order_by('closing_date')
return queryset
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['stage_choices'] = models.Stage.choices
return context
def get_template_names(self):
return self.template_name
@login_required
def delete_opportunity(request, pk):
"""
@ -7706,3 +7726,78 @@ def mark_all_notifications_as_read(request):
def notifications_history(request):
models.Notification.objects.filter(user=request.user, is_read=False).update(read=True)
return JsonResponse({'status': 'success'})
# def activity_create(request,pk):
# lead = get_object_or_404(models.Lead, pk=pk)
# form = forms.ActivityHistoryForm()
# dealer = get_user_type(request)
# if request.method == "POST":
# form = forms.ActivityHistoryForm(request.POST)
# if form.is_valid():
# models.Activity.objects.create(
# dealer=dealer,
# activity_type=form.cleaned_data['activity_type'],
# notes=form.cleaned_data['description'],
# created_by=request.user,
# content_object=lead
# )
# return render(request, 'activity_history.html')
def add_activity(request,content_type,pk):
try:
model = apps.get_model(f'inventory.{content_type}')
except LookupError:
raise Http404("Model not found")
obj = get_object_or_404(model, pk=pk)
dealer = get_user_type(request)
if request.method == "POST":
form = forms.ActivityForm(request.POST)
if form.is_valid():
activity = form.save(commit=False)
activity.dealer = dealer
activity.content_object = obj
activity.created_by = request.user
activity.notes = form.cleaned_data['notes']
activity.activity_type = form.cleaned_data['activity_type']
activity.save()
messages.success(request, _("Activity added successfully"))
else:
messages.error(request, _("Activity form is not valid"))
return redirect(f"{content_type}_detail", pk=pk)
def add_task(request,content_type,pk):
try:
model = apps.get_model(f'inventory.{content_type}')
except LookupError:
raise Http404("Model not found")
obj = get_object_or_404(model, pk=pk)
dealer = get_user_type(request)
if request.method == "POST":
form = forms.StaffTaskForm(request.POST)
if form.is_valid():
task = form.save(commit=False)
task.dealer = dealer
task.content_object = obj
task.assigned_to = request.user
task.created_by = request.user
task.due_date = form.cleaned_data['due_date']
task.save()
messages.success(request, _("Task added successfully"))
else:
print(form.errors)
messages.error(request, _("Task form is not valid"))
return redirect(f"{content_type}_detail", pk=pk)
def update_task(request,pk):
task = get_object_or_404(models.Tasks, pk=pk)
if request.method == "POST":
task.completed = False if task.completed else True
task.save()
messages.success(request, _("Task updated successfully"))
else:
messages.error(request, _("Task form is not valid"))
response = HttpResponse()
response['HX-Refresh'] = 'true'
return response

4
templates/403.html
View File

@ -40,7 +40,7 @@
}
.main {
width: 100%;
max-width: 1200px;
max-width: 1200px;
margin: auto;
}
.flex-center {
@ -53,7 +53,7 @@
}
</style>
</head>
<body>
<main class="main" id="top">
<div class="px-3">

6
templates/404.html
View File

@ -40,7 +40,7 @@
}
.main {
width: 100%;
max-width: 1200px;
max-width: 1200px;
margin: auto;
}
.flex-center {
@ -53,7 +53,7 @@
}
</style>
</head>
<body>
<main class="main" id="top">
<div class="px-3">
@ -64,7 +64,7 @@
<img class="img-fluid w-md-50 w-lg-100 d-light-none" src="{% static 'images/spot-illustrations/dark_500-illustration.png' %}" alt="" width="540" />
</div>
<div class="col-12 col-lg-6 text-center text-lg-start">
<img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/500.png' %}" alt="" />
<img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/500.png' %}" alt="" />
<h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2>
<p class="text-body mb-5">But no worries! Our ostrich is looking everywhere <br class="d-none d-sm-block" />while you wait safely. </p><a class="btn btn-lg btn-primary" href="{% url 'home' %}">Go Home</a>
</div>

6
templates/500.html
View File

@ -40,7 +40,7 @@
}
.main {
width: 100%;
max-width: 1200px;
max-width: 1200px;
margin: auto;
}
.flex-center {
@ -53,7 +53,7 @@
}
</style>
</head>
<body>
<main class="main" id="top">
<div class="px-3">
@ -64,7 +64,7 @@
<img class="img-fluid w-md-50 w-lg-100 d-light-none" src="{% static 'images/spot-illustrations/dark_404-illustration.png' %}" alt="" width="540" />
</div>
<div class="col-12 col-lg-6 text-center text-lg-start">
<img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/404.png' %}" alt="" />
<img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/404.png' %}" alt="" />
<h2 class="text-body-secondary fw-bolder mb-3">Unknow error!</h2>
<p class="text-body mb-5">But relax! Our cat is here to play you some music.</p><a class="btn btn-lg btn-primary" href="{% url 'home' %}">Go Home</a>
</div>

70
templates/account/confirm_login_code..html
View File

@ -8,42 +8,42 @@
{% endblock head_title %}
{% block content %}
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% translate "Enter Sign-In Code" %}</h3>
</div>
{% setvar email_link %}
<a href="mailto:{{ email }}">{{ email }}</a>
{% endsetvar %}
<p>
{% blocktranslate %}We’ve sent a code to {{ email_link }}. The code expires shortly, so please enter it soon.{% endblocktranslate %}
</p>
<form method="post" action="{% url 'account_confirm_login_code' %}" class="form needs-validation" novalidate>
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans "Sign In" %}</button>
</form>
{% element button type="submit" form="logout-from-stage" tags="link" %}
{% translate "Cancel" %}
{% endelement %}
<form id="logout-from-stage"
method="post"
action="{% url 'account_logout' %}">
<input type="hidden" name="next" value="{% url 'account_login' %}">
{% csrf_token %}
</form>
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% translate "Enter Sign-In Code" %}</h3>
</div>
{% setvar email_link %}
<a href="mailto:{{ email }}">{{ email }}</a>
{% endsetvar %}
<p>
{% blocktranslate %}We’ve sent a code to {{ email_link }}. The code expires shortly, so please enter it soon.{% endblocktranslate %}
</p>
<form method="post" action="{% url 'account_confirm_login_code' %}" class="form needs-validation" novalidate>
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans "Sign In" %}</button>
</form>
{% element button type="submit" form="logout-from-stage" tags="link" %}
{% translate "Cancel" %}
{% endelement %}
<form id="logout-from-stage"
method="post"
action="{% url 'account_logout' %}">
<input type="hidden" name="next" value="{% url 'account_login' %}">
{% csrf_token %}
</form>
</div>
</div>
</div>
{% endblock content %}

158
templates/account/email.html
View File

@ -5,86 +5,86 @@
{% trans "Email Addresses" %}
{% endblock head_title %}
{% block content %}
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Email Addresses" %}</h3>
</div>
{% if emailaddresses %}
<p>
{% trans 'The following email addresses are associated with your account:' %}
</p>
{% url 'account_email' as email_url %}
<form action="{{ email_url }}" method="POST" class="form email list">
{% csrf_token %}
<div class="fs-9 fw-bold form-group mb-3 list-group">
{% for radio in emailaddress_radios %}
{% with emailaddress=radio.emailaddress %}
<label for="{{ radio.id }}">
<input type="radio" name="email" checked="{{ radio.checked }}" value="{{ emailaddress.email }}" id="{{ radio.id }}" class="form-check-input mb-3" />
{{ emailaddress.email }}
{% if emailaddress.verified %}
<span class="badge badge-phoenix badge-phoenix-success verified">{% translate "Verified" %}</span>
{% else %}
<span class="badge badge-phoenix badge-phoenix-warning unverified">{% translate "Unverified" %}</span>
{% endif %}
{% if emailaddress.primary %}
<span class="badge badge-phoenix badge-phoenix-primary email">{% translate "Primary" %}</span>
{% endif %}
{% endwith %}
</label>
{% endfor %}
</div>
<div class="mt-2 mb-6">
<button type="submit" name="action_primary" class="btn btn-sm btn-primary">{% trans 'Make Primary' %}</button>
<button type="submit" name="action_send" class="btn btn-sm btn-secondary">{% trans 'Re-send Verification' %}</button>
<button type="submit" name="action_remove" class="btn btn-sm btn-danger delete">{% trans 'Remove' %}</button>
</div>
</form>
{% else %}
{% include "account/snippets/warn_no_email.html" %}
{% endif %}
{% if can_add_email %}
<p class="fs-8 fw-bold text-start">
{% trans "Add Email Address" %}
</p>
{% url 'account_email' as action_url %}
<form action="{{ action_url }}" method="POST" class="form email add">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-sn btn-success w-100" type="submit" name="action_add">
{% trans "Add Email" %}
</button>
</form>
{% endif %}
<script>
(function() {
var message = "{% trans 'Do you really want to remove the selected email address?' %}";
var actions = document.getElementsByName('action_remove');
if (actions.length) {
actions[0].addEventListener("click", function(e) {
if (! confirm(message)) {
e.preventDefault();
}
});
}
})();
</script>
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Email Addresses" %}</h3>
</div>
{% if emailaddresses %}
<p>
{% trans 'The following email addresses are associated with your account:' %}
</p>
{% url 'account_email' as email_url %}
<form action="{{ email_url }}" method="POST" class="form email list">
{% csrf_token %}
<div class="fs-9 fw-bold form-group mb-3 list-group">
{% for radio in emailaddress_radios %}
{% with emailaddress=radio.emailaddress %}
<label for="{{ radio.id }}">
<input type="radio" name="email" checked="{{ radio.checked }}" value="{{ emailaddress.email }}" id="{{ radio.id }}" class="form-check-input mb-3" />
{{ emailaddress.email }}
{% if emailaddress.verified %}
<span class="badge badge-phoenix badge-phoenix-success verified">{% translate "Verified" %}</span>
{% else %}
<span class="badge badge-phoenix badge-phoenix-warning unverified">{% translate "Unverified" %}</span>
{% endif %}
{% if emailaddress.primary %}
<span class="badge badge-phoenix badge-phoenix-primary email">{% translate "Primary" %}</span>
{% endif %}
{% endwith %}
</label>
{% endfor %}
</div>
<div class="mt-2 mb-6">
<button type="submit" name="action_primary" class="btn btn-sm btn-primary">{% trans 'Make Primary' %}</button>
<button type="submit" name="action_send" class="btn btn-sm btn-secondary">{% trans 'Re-send Verification' %}</button>
<button type="submit" name="action_remove" class="btn btn-sm btn-danger delete">{% trans 'Remove' %}</button>
</div>
</form>
{% else %}
{% include "account/snippets/warn_no_email.html" %}
{% endif %}
{% if can_add_email %}
<p class="fs-8 fw-bold text-start">
{% trans "Add Email Address" %}
</p>
{% url 'account_email' as action_url %}
<form action="{{ action_url }}" method="POST" class="form email add">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-sn btn-success w-100" type="submit" name="action_add">
{% trans "Add Email" %}
</button>
</form>
{% endif %}
<script>
(function() {
var message = "{% trans 'Do you really want to remove the selected email address?' %}";
var actions = document.getElementsByName('action_remove');
if (actions.length) {
actions[0].addEventListener("click", function(e) {
if (! confirm(message)) {
e.preventDefault();
}
});
}
})();
</script>
</div>
</div>
</div>
{% endblock content %}

82
templates/account/email_confirm.html
View File

@ -6,48 +6,48 @@
{% trans "Confirm Email Address" %}
{% endblock head_title %}
{% block content %}
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Confirm Email Address" %}</h3>
</div>
{% if confirmation %}
{% user_display confirmation.email_address.user as user_display %}
{% if can_confirm %}
<p>
{% blocktrans with confirmation.email_address.email as email %}Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an email address for user {{ user_display }}.{% endblocktrans %}
</p>
{% url 'account_confirm_email' confirmation.key as action_url %}
<form class="form" action="{{ action_url }}" method="post">
{% csrf_token %}
{{ redirect_field }}
<button class="btn btn-sm btn-phoenix-primary" type="submit">
{% trans 'Confirm' %}
</button>
</form>
{% else %}
<p>
{% blocktrans %}Unable to confirm {{ email }} because it is already confirmed by a different account.{% endblocktrans %}
</p>
{% endif %}
{% else %}
{% url 'account_email' as email_url %}
<p>
{% blocktrans %}This email confirmation link expired or is invalid. Please <a href="{{ email_url }}">issue a new email confirmation request</a>.{% endblocktrans %}
</p>
{% endif %}
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Confirm Email Address" %}</h3>
</div>
{% if confirmation %}
{% user_display confirmation.email_address.user as user_display %}
{% if can_confirm %}
<p>
{% blocktrans with confirmation.email_address.email as email %}Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an email address for user {{ user_display }}.{% endblocktrans %}
</p>
{% url 'account_confirm_email' confirmation.key as action_url %}
<form class="form" action="{{ action_url }}" method="post">
{% csrf_token %}
{{ redirect_field }}
<button class="btn btn-sm btn-phoenix-primary" type="submit">
{% trans 'Confirm' %}
</button>
</form>
{% else %}
<p>
{% blocktrans %}Unable to confirm {{ email }} because it is already confirmed by a different account.{% endblocktrans %}
</p>
{% endif %}
{% else %}
{% url 'account_email' as email_url %}
<p>
{% blocktrans %}This email confirmation link expired or is invalid. Please <a href="{{ email_url }}">issue a new email confirmation request</a>.{% endblocktrans %}
</p>
{% endif %}
</div>
</div>
</div>
{% endblock content %}

22
templates/account/lock-screen.html
View File

@ -104,14 +104,14 @@
<div class="card-body chat p-0">
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a>
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a>
</div>
<div class="text-center mt-auto">
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../../assets/img/team/30.webp" alt="" /></div>
@ -256,9 +256,9 @@
<div class="card-body d-flex align-items-center px-2 py-1">
<div class="position-relative rounded-start" style="height:34px;width:28px">
<div class="settings-popover"><span class="ripple"><span class="fa-spin position-absolute all-0 d-flex flex-center"><span class="icon-spin position-absolute all-0 d-flex flex-center">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7369 12.3941L19.1989 12.1065C18.4459 11.7041 18.0843 10.8487 18.0843 9.99495C18.0843 9.14118 18.4459 8.28582 19.1989 7.88336L19.7369 7.59581C19.9474 7.47484 20.0316 7.23291 19.9474 7.03131C19.4842 5.57973 18.6843 4.28943 17.6738 3.20075C17.5053 3.03946 17.2527 2.99914 17.0422 3.12011L16.393 3.46714C15.6883 3.84379 14.8377 3.74529 14.1476 3.3427C14.0988 3.31422 14.0496 3.28621 14.0002 3.25868C13.2568 2.84453 12.7055 2.10629 12.7055 1.25525V0.70081C12.7055 0.499202 12.5371 0.297594 12.2845 0.257272C10.7266 -0.105622 9.16879 -0.0653007 7.69516 0.257272C7.44254 0.297594 7.31623 0.499202 7.31623 0.70081V1.23474C7.31623 2.09575 6.74999 2.8362 5.99824 3.25599C5.95774 3.27861 5.91747 3.30159 5.87744 3.32493C5.15643 3.74527 4.26453 3.85902 3.53534 3.45302L2.93743 3.12011C2.72691 2.99914 2.47429 3.03946 2.30587 3.20075C1.29538 4.28943 0.495411 5.57973 0.0322686 7.03131C-0.051939 7.23291 0.0322686 7.47484 0.242788 7.59581L0.784376 7.8853C1.54166 8.29007 1.92694 9.13627 1.92694 9.99495C1.92694 10.8536 1.54166 11.6998 0.784375 12.1046L0.242788 12.3941C0.0322686 12.515 -0.051939 12.757 0.0322686 12.9586C0.495411 14.4102 1.29538 15.7005 2.30587 16.7891C2.47429 16.9504 2.72691 16.9907 2.93743 16.8698L3.58669 16.5227C4.29133 16.1461 5.14131 16.2457 5.8331 16.6455C5.88713 16.6767 5.94159 16.7074 5.99648 16.7375C6.75162 17.1511 7.31623 17.8941 7.31623 18.7552V19.2891C7.31623 19.4425 7.41373 19.5959 7.55309 19.696C7.64066 19.7589 7.74815 19.7843 7.85406 19.8046C9.35884 20.0925 10.8609 20.0456 12.2845 19.7729C12.5371 19.6923 12.7055 19.4907 12.7055 19.2891V18.7346C12.7055 17.8836 13.2568 17.1454 14.0002 16.7312C14.0496 16.7037 14.0988 16.6757 14.1476 16.6472C14.8377 16.2446 15.6883 16.1461 16.393 16.5227L17.0422 16.8698C17.2527 16.9907 17.5053 16.9504 17.6738 16.7891C18.7264 15.7005 19.4842 14.4102 19.9895 12.9586C20.0316 12.757 19.9474 12.515 19.7369 12.3941ZM10.0109 13.2005C8.1162 13.2005 6.64257 11.7893 6.64257 9.97478C6.64257 8.20063 8.1162 6.74905 10.0109 6.74905C11.8634 6.74905 13.3792 8.20063 13.3792 9.97478C13.3792 11.7893 11.8634 13.2005 10.0109 13.2005Z" fill="#2A7BE4"></path>
</svg></span></span></span></div>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7369 12.3941L19.1989 12.1065C18.4459 11.7041 18.0843 10.8487 18.0843 9.99495C18.0843 9.14118 18.4459 8.28582 19.1989 7.88336L19.7369 7.59581C19.9474 7.47484 20.0316 7.23291 19.9474 7.03131C19.4842 5.57973 18.6843 4.28943 17.6738 3.20075C17.5053 3.03946 17.2527 2.99914 17.0422 3.12011L16.393 3.46714C15.6883 3.84379 14.8377 3.74529 14.1476 3.3427C14.0988 3.31422 14.0496 3.28621 14.0002 3.25868C13.2568 2.84453 12.7055 2.10629 12.7055 1.25525V0.70081C12.7055 0.499202 12.5371 0.297594 12.2845 0.257272C10.7266 -0.105622 9.16879 -0.0653007 7.69516 0.257272C7.44254 0.297594 7.31623 0.499202 7.31623 0.70081V1.23474C7.31623 2.09575 6.74999 2.8362 5.99824 3.25599C5.95774 3.27861 5.91747 3.30159 5.87744 3.32493C5.15643 3.74527 4.26453 3.85902 3.53534 3.45302L2.93743 3.12011C2.72691 2.99914 2.47429 3.03946 2.30587 3.20075C1.29538 4.28943 0.495411 5.57973 0.0322686 7.03131C-0.051939 7.23291 0.0322686 7.47484 0.242788 7.59581L0.784376 7.8853C1.54166 8.29007 1.92694 9.13627 1.92694 9.99495C1.92694 10.8536 1.54166 11.6998 0.784375 12.1046L0.242788 12.3941C0.0322686 12.515 -0.051939 12.757 0.0322686 12.9586C0.495411 14.4102 1.29538 15.7005 2.30587 16.7891C2.47429 16.9504 2.72691 16.9907 2.93743 16.8698L3.58669 16.5227C4.29133 16.1461 5.14131 16.2457 5.8331 16.6455C5.88713 16.6767 5.94159 16.7074 5.99648 16.7375C6.75162 17.1511 7.31623 17.8941 7.31623 18.7552V19.2891C7.31623 19.4425 7.41373 19.5959 7.55309 19.696C7.64066 19.7589 7.74815 19.7843 7.85406 19.8046C9.35884 20.0925 10.8609 20.0456 12.2845 19.7729C12.5371 19.6923 12.7055 19.4907 12.7055 19.2891V18.7346C12.7055 17.8836 13.2568 17.1454 14.0002 16.7312C14.0496 16.7037 14.0988 16.6757 14.1476 16.6472C14.8377 16.2446 15.6883 16.1461 16.393 16.5227L17.0422 16.8698C17.2527 16.9907 17.5053 16.9504 17.6738 16.7891C18.7264 15.7005 19.4842 14.4102 19.9895 12.9586C20.0316 12.757 19.9474 12.515 19.7369 12.3941ZM10.0109 13.2005C8.1162 13.2005 6.64257 11.7893 6.64257 9.97478C6.64257 8.20063 8.1162 6.74905 10.0109 6.74905C11.8634 6.74905 13.3792 8.20063 13.3792 9.97478C13.3792 11.7893 11.8634 13.2005 10.0109 13.2005Z" fill="#2A7BE4"></path>
</svg></span></span></span></div>
</div><small class="text-uppercase text-body-tertiary fw-bold py-2 pe-2 ps-1 rounded-end">customize</small>
</div>
</a>

138
templates/account/login.html
View File

@ -8,80 +8,80 @@
{% block content %}
<section class="main my-2">
<div class="row flex-center ">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Sign In" %}</h3>
{% if not SOCIALACCOUNT_ONLY %}
<div class="row flex-center ">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Sign In" %}</h3>
{% if not SOCIALACCOUNT_ONLY %}
</div>
<form method="post" action="{% url 'account_login' %}" class="form needs-validation" novalidate>
{% csrf_token %}
<div class="mb-3 text-start">
<label class="form-label" for="id_login">{{ _("Email") }}</label>
<div class="form-icon-container">
<input type="email" name="login" id="id_login" class="form-control form-icon-input" placeholder="{{ _("Email") }}" required>
<span class="fas fa-user text-body fs-9 form-icon"></span>
</div>
<form method="post" action="{% url 'account_login' %}" class="form needs-validation" novalidate>
{% csrf_token %}
<div class="mb-3 text-start">
<label class="form-label" for="id_login">{{ _("Email") }}</label>
<div class="form-icon-container">
<input type="email" name="login" id="id_login" class="form-control form-icon-input" placeholder="{{ _("Email") }}" required>
<span class="fas fa-user text-body fs-9 form-icon"></span>
</div>
</div>
<div class="mb-3 text-start">
<label class="form-label" for="id_password">{{ _("Password") }}</label>
<div class="form-icon-container">
<input type="password" name="password" id="id_password" class="form-control form-icon-input" placeholder="{{ _("Password") }}" required>
<span class="fas fa-key text-body fs-9 form-icon"></span>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" name="remember" id="id_remember" class="form-check-input">
<label class="form-check-label mb-0 fs-9" for="id_remember">{{ _("Remember Me")}}</label>
</div>
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans "Sign In" %}</button>
<div class="text-start mt-1">
<a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?")}}</a>
</div>
{% include 'partials/form_errors.html' %}
</form>
<div class="text-center my-3 fs-9">
{% trans 'If you have not created an account yet, then please' %}
<a class="fs-9 fw-bold" href="{% url 'account_signup' %}">{% trans 'Sign Up' %}</a>
</div>
{% endif %}
</div>
</div>
<div class="mb-3 text-start">
<label class="form-label" for="id_password">{{ _("Password") }}</label>
<div class="form-icon-container">
<input type="password" name="password" id="id_password" class="form-control form-icon-input" placeholder="{{ _("Password") }}" required>
<span class="fas fa-key text-body fs-9 form-icon"></span>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" name="remember" id="id_remember" class="form-check-input">
<label class="form-check-label mb-0 fs-9" for="id_remember">{{ _("Remember Me")}}</label>
</div>
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans "Sign In" %}</button>
<div class="text-start mt-1">
<a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?")}}</a>
</div>
{% include 'partials/form_errors.html' %}
</section>
<section class="pt-lg-0 pt-xl-8">
{% include 'footer.html' %}
</section>
</form>
<div class="text-center my-3 fs-9">
{% trans 'If you have not created an account yet, then please' %}
<a class="fs-9 fw-bold" href="{% url 'account_signup' %}">{% trans 'Sign Up' %}</a>
</div>
{% endif %}
</div>
</div>
</section>
<section class="pt-lg-0 pt-xl-8">
{% include 'footer.html' %}
</section>
{% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
<hr>
{% element button_group vertical=True %}
{% if PASSKEY_LOGIN_ENABLED %}
{% element button type="submit" form="mfa_login" id="passkey_login" tags="prominent,login,outline,primary" %}
{% trans "Sign in with a passkey" %}
{% endelement %}
{% endif %}
{% if LOGIN_BY_CODE_ENABLED %}
{% element button href=request_login_code_url tags="prominent,login,outline,primary" %}
{% trans "Mail me a sign-in code" %}
{% endelement %}
{% endif %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
{% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
<hr>
{% element button_group vertical=True %}
{% if PASSKEY_LOGIN_ENABLED %}
{% element button type="submit" form="mfa_login" id="passkey_login" tags="prominent,login,outline,primary" %}
{% trans "Sign in with a passkey" %}
{% endelement %}
{% endif %}
{% if LOGIN_BY_CODE_ENABLED %}
{% element button href=request_login_code_url tags="prominent,login,outline,primary" %}
{% trans "Mail me a sign-in code" %}
{% endelement %}
{% endif %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
{% endblock content %}

36
templates/account/logout.html
View File

@ -3,28 +3,28 @@
{% block title %}{{ _("Sign Out") }}{% endblock title %}
{% block content %}
<div class="row">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-4 col-xxl-3">
<div class="text-center mb-6 mx-auto">
<div class="mb-6">
<h1 class="fw-bold">{{ _("Sign Out") }}</h1>
<p class="text-body-tertiary">{{ _("Are you sure you want to sign out?") }}</p>
<div class="row">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-4 col-xxl-3">
<div class="text-center mb-6 mx-auto">
<div class="mb-6">
<h1 class="fw-bold">{{ _("Sign Out") }}</h1>
<p class="text-body-tertiary">{{ _("Are you sure you want to sign out?") }}</p>
</div>
<div class="d-grid">
<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{{ redirect_field }}
<div class="d-grid gap-2 mt-3">
<button type="submit" class="btn btn-danger">
<span data-feather="log-out"></span> {{ _("Sign Out") }}
</button>
</div>
<div class="d-grid">
<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{{ redirect_field }}
<div class="d-grid gap-2 mt-3">
<button type="submit" class="btn btn-danger">
<span data-feather="log-out"></span> {{ _("Sign Out") }}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}

52
templates/account/otp_verification.html
View File

@ -2,37 +2,37 @@
{% load i18n static %}
{% block content %}
<div class="row">
<div class="row flex-center min-vh-50 py-5">
<div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<div class="px-xxl-5">
<div class="text-center mb-6">
<h4 class="text-body-highlight">{{ _("Enter the verification code") }}</h4>
<p class="text-body-tertiary mb-0">
{{ _("An email containing a 6-digit verification code has been sent to your email.") }}
</p>
<div class="row">
<div class="row flex-center min-vh-50 py-5">
<div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<div class="px-xxl-5">
<div class="text-center mb-6">
<h4 class="text-body-highlight">{{ _("Enter the verification code") }}</h4>
<p class="text-body-tertiary mb-0">
{{ _("An email containing a 6-digit verification code has been sent to your email.") }}
</p>
<form class="verification-form" method="POST">
{% csrf_token %}
<div class="d-flex align-items-center gap-2 mb-3">
<input class="form-control px-2 text-center" type="number" name="otp_code" required maxlength="6" />
</div>
<Button class="btn btn-primary w-100 mb-5" type="submit">
{{ _("Verify") }}
</Button>
<a class="fs-9" href="">{{ _("Didn’t receive the code") }}</a>
</form>
<form class="verification-form" method="POST">
{% csrf_token %}
<div class="d-flex align-items-center gap-2 mb-3">
<input class="form-control px-2 text-center" type="number" name="otp_code" required maxlength="6" />
</div>
<Button class="btn btn-primary w-100 mb-5" type="submit">
{{ _("Verify") }}
</Button>
<a class="fs-9" href="">{{ _("Didn’t receive the code") }}</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

46
templates/account/password_change.html
View File

@ -5,30 +5,30 @@
{% trans "Change Password" %}
{% endblock head_title %}
{% block content %}
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Change Password" %}</h3>
</div>
<form method="post" action="{% url 'account_change_password' %}" class="form needs-validation" novalidate>
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans "Change Password" %}</button>
<div class="text-start mt-1">
<a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?")}}</a>
</div>
</form>
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Change Password" %}</h3>
</div>
<form method="post" action="{% url 'account_change_password' %}" class="form needs-validation" novalidate>
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans "Change Password" %}</button>
<div class="text-start mt-1">
<a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?")}}</a>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}

58
templates/account/password_reset.html
View File

@ -5,37 +5,37 @@
{% trans "Password Reset" %}
{% endblock head_title %}
{% block content %}
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Password Reset" %}</h3>
</div>
{% if user.is_authenticated %}
{% include "account/snippets/already_logged_in.html" %}
{% endif %}
<p>
{% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}
</p>
<form method="post" action="{% url 'account_reset_password' %}" class="form needs-validation" novalidate>
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans 'Reset My Password' %}</button>
</form>
<p class="fs-9 mt-4">
{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}
</p>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Password Reset" %}</h3>
</div>
{% if user.is_authenticated %}
{% include "account/snippets/already_logged_in.html" %}
{% endif %}
<p>
{% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}
</p>
<form method="post" action="{% url 'account_reset_password' %}" class="form needs-validation" novalidate>
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans 'Reset My Password' %}</button>
</form>
<p class="fs-9 mt-4">
{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}
</p>
</div>
</div>
</div>
{% endblock content %}

40
templates/account/password_reset_done.html
View File

@ -7,27 +7,27 @@
{% endblock head_title %}
{% block content %}
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Password Reset" %}</h3>
</div>
{% if user.is_authenticated %}
{% include "account/snippets/already_logged_in.html" %}
{% endif %}
<p>
{% blocktrans %}We have sent you an email. If you have not received it please check your spam folder. Otherwise contact us if you do not receive it in a few minutes.{% endblocktrans %}
</p>
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Password Reset" %}</h3>
</div>
{% if user.is_authenticated %}
{% include "account/snippets/already_logged_in.html" %}
{% endif %}
<p>
{% blocktrans %}We have sent you an email. If you have not received it please check your spam folder. Otherwise contact us if you do not receive it in a few minutes.{% endblocktrans %}
</p>
</div>
</div>
</div>
{% endblock content %}

68
templates/account/password_reset_from_key.html
View File

@ -6,41 +6,41 @@
{% trans "Change Password" %}
{% endblock head_title %}
{% block content %}
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">
{% if token_fail %}
{% trans "Bad Token" %}
{% else %}
{% trans "Change Password" %}
{% endif %}
</h3>
</div>
{% if token_fail %}
{% url 'account_reset_password' as passwd_reset_url %}
<p>
{% blocktrans %}The password reset link was invalid, possibly because it has already been used. Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}
</p>
{% else %}
<form method="POST" action="{{ action_url }}" class="form">
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans 'Change Password' %}</button>
</form>
{% endif %}
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">
{% if token_fail %}
{% trans "Bad Token" %}
{% else %}
{% trans "Change Password" %}
{% endif %}
</h3>
</div>
{% if token_fail %}
{% url 'account_reset_password' as passwd_reset_url %}
<p>
{% blocktrans %}The password reset link was invalid, possibly because it has already been used. Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}
</p>
{% else %}
<form method="POST" action="{{ action_url }}" class="form">
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
<button type="submit" class="btn btn-primary btn-sm w-100">{% trans 'Change Password' %}</button>
</form>
{% endif %}
</div>
</div>
</div>
{% endblock content %}

32
templates/account/password_reset_from_key_done.html
View File

@ -6,23 +6,23 @@
{% endblock head_title %}
{% block content %}
<div class="row ">
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<div class="row flex-center min-vh-50">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Change Password" %}</h3>
<p class="fs-9 fw-bold text-success">{% trans 'Your password is now changed.' %} <span class="far fa-check-circle ms-1"></span></p>
</div>
</div>
</div>
</a>
<div class="text-center">
<h3 class="mb-4">{% trans "Change Password" %}</h3>
<p class="fs-9 fw-bold text-success">{% trans 'Your password is now changed.' %} <span class="far fa-check-circle ms-1"></span></p>
</div>
</div>
</div>
</div>
{% endblock content %}

300
templates/account/signup-wizard.html
View File

@ -4,90 +4,90 @@
{% block content %}
<section class="main my-2">
<section class="main my-2">
<div class="container-fluid">
<div class="row form-container" id="form-container">
<div class="row form-container" id="form-container">
<div class="col-12 "><a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="col-12 "><a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<div class="text-center">
<h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
<p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
</div>
<h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
<p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
</div>
<div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
<div class="card-header pt-3 pb-2 ">
<ul class="nav justify-content-between nav-wizard nav-wizard-success" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link active fw-semibold" href="#bootstrap-wizard-validation-tab1" data-bs-toggle="tab" data-wizard-step="1" aria-selected="true" role="tab">
<div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Access' %}</span></div>
</a></li>
<li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab2" data-bs-toggle="tab" data-wizard-step="2" aria-selected="false" tabindex="-1" role="tab">
<div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Account' %}</span></div>
</a></li>
<li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab3" data-bs-toggle="tab" data-wizard-step="3" aria-selected="false" tabindex="-1" role="tab">
<div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><svg class="fa fa-file-lines"></svg></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Extra' %}</span></div>
</a></li>
<li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab4" data-bs-toggle="tab" data-wizard-step="4" aria-selected="false" tabindex="-1" role="tab">
<div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-check"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Done' %}</span></div>
</a></li>
</ul>
</div>
<div class="card-body pt-4 pb-0">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab1" id="bootstrap-wizard-validation-tab1">
<form class="needs-validation" id="wizardValidationForm1" novalidate="novalidate" data-wizard-form="1">
{{form1|crispy}}
</form>
</div>
<div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab2" id="bootstrap-wizard-validation-tab2">
<form class="needs-validation" id="wizardValidationForm2" novalidate="novalidate" data-wizard-form="2">
{{form2|crispy}}
</form>
</div>
<div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab3" id="bootstrap-wizard-validation-tab3">
<form class="needs-validation" id="wizardValidationForm3" novalidate="novalidate" data-wizard-form="3">
{{form3|crispy}}
</form>
</div>
<div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab4" id="bootstrap-wizard-validation-tab4">
<div class="row flex-center pb-8 pt-4 gx-3 gy-4">
<div class="col-12 col-sm-auto">
<div class="text-center text-sm-start"><img class="d-dark-none" src="{% static 'images/spot-illustrations/38.webp' %}" alt="" width="220"><img class="d-light-none" src="{% static 'images/spot-illustrations/dark_38.webp' %}" alt="" width="220"></div>
<div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
<div class="card-header pt-3 pb-2 ">
<ul class="nav justify-content-between nav-wizard nav-wizard-success" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link active fw-semibold" href="#bootstrap-wizard-validation-tab1" data-bs-toggle="tab" data-wizard-step="1" aria-selected="true" role="tab">
<div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Access' %}</span></div>
</a></li>
<li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab2" data-bs-toggle="tab" data-wizard-step="2" aria-selected="false" tabindex="-1" role="tab">
<div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Account' %}</span></div>
</a></li>
<li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab3" data-bs-toggle="tab" data-wizard-step="3" aria-selected="false" tabindex="-1" role="tab">
<div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><svg class="fa fa-file-lines"></svg></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Extra' %}</span></div>
</a></li>
<li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab4" data-bs-toggle="tab" data-wizard-step="4" aria-selected="false" tabindex="-1" role="tab">
<div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-check"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Done' %}</span></div>
</a></li>
</ul>
</div>
<div class="col-12 col-sm-auto">
<div class="text-center text-sm-start">
<h5 class="mb-3">{% trans 'You are all set!' %}</h5>
<p class="text-body-emphasis fs-9">{% trans 'Now you can access your account' %}<br>{% trans 'anytime' %} {% trans 'anywhere' %}</p><button class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
<div class="card-body pt-4 pb-0">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab1" id="bootstrap-wizard-validation-tab1">
<form class="needs-validation" id="wizardValidationForm1" novalidate="novalidate" data-wizard-form="1">
{{form1|crispy}}
</form>
</div>
<div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab2" id="bootstrap-wizard-validation-tab2">
<form class="needs-validation" id="wizardValidationForm2" novalidate="novalidate" data-wizard-form="2">
{{form2|crispy}}
</form>
</div>
<div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab3" id="bootstrap-wizard-validation-tab3">
<form class="needs-validation" id="wizardValidationForm3" novalidate="novalidate" data-wizard-form="3">
{{form3|crispy}}
</form>
</div>
<div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab4" id="bootstrap-wizard-validation-tab4">
<div class="row flex-center pb-8 pt-4 gx-3 gy-4">
<div class="col-12 col-sm-auto">
<div class="text-center text-sm-start"><img class="d-dark-none" src="{% static 'images/spot-illustrations/38.webp' %}" alt="" width="220"><img class="d-light-none" src="{% static 'images/spot-illustrations/dark_38.webp' %}" alt="" width="220"></div>
</div>
<div class="col-12 col-sm-auto">
<div class="text-center text-sm-start">
<h5 class="mb-3">{% trans 'You are all set!' %}</h5>
<p class="text-body-emphasis fs-9">{% trans 'Now you can access your account' %}<br>{% trans 'anytime' %} {% trans 'anywhere' %}</p><button class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer border-top-0" data-wizard-footer="data-wizard-footer">
<div class="d-flex pager wizard list-inline mb-0">
<button class="d-none btn btn-link ps-0" type="button" data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
<div class="flex-1 text-end">
<button class="btn btn-phoenix-primary px-6 px-sm-6 next" type="submit" data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer border-top-0" data-wizard-footer="data-wizard-footer">
<div class="d-flex pager wizard list-inline mb-0">
<button class="d-none btn btn-link ps-0" type="button" data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
<div class="flex-1 text-end">
<button class="btn btn-phoenix-primary px-6 px-sm-6 next" type="submit" data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-lg-0 pt-xl-8">
{% include 'footer.html' %}
</section>
<script src="{% static 'js/phoenix.js' %}"></script>
{% endblock content %}
</section>
<section class="pt-lg-0 pt-xl-8">
{% include 'footer.html' %}
</section>
<script src="{% static 'js/phoenix.js' %}"></script>
{% endblock content %}
{% block customJS %}
{% block customJS %}
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<script>
const validator = new JustValidate('#wizardValidationForm1', {
@ -195,92 +195,92 @@
}
})
*/
const url = "{% url 'account_signup' %}";
let submit_btn = document.getElementById('submit_btn');
const csrftoken = getCookie('csrftoken');
const url = "{% url 'account_signup' %}";
let submit_btn = document.getElementById('submit_btn');
const csrftoken = getCookie('csrftoken');
submit_btn.addEventListener('click', async () => {
const allFormData = getAllFormData();
submit_btn.addEventListener('click', async () => {
const allFormData = getAllFormData();
try {
showLoading();
const response = await fetch(url, {
method: 'POST',
headers: {
'X-CSRFToken': csrftoken,
'Content-Type': 'application/json',
},
body: JSON.stringify(allFormData),
});
hideLoading();
const data = await response.json();
if (response.ok) {
notify("success","Account created successfully");
setTimeout(() => {
window.location.href = "{% url 'account_login' %}";
}, 1000);
} else {
notify("error",data.error);
}
} catch (error) {
notify("error",error);
}
});
function getAllFormData() {
const forms = document.querySelectorAll('form');
const formData = {};
forms.forEach((form, index) => {
const formId = form.id || `form${index + 1}`;
formData[formId] = {};
const formElements = form.elements;
for (let element of formElements) {
if (element.name) {
formData[formId][element.name] = element.value;
}
}
try {
showLoading();
const response = await fetch(url, {
method: 'POST',
headers: {
'X-CSRFToken': csrftoken,
'Content-Type': 'application/json',
},
body: JSON.stringify(allFormData),
});
return formData;
hideLoading();
const data = await response.json();
if (response.ok) {
notify("success","Account created successfully");
setTimeout(() => {
window.location.href = "{% url 'account_login' %}";
}, 1000);
} else {
notify("error",data.error);
}
} catch (error) {
notify("error",error);
}
function showLoading() {
Swal.fire({
title: "{% trans 'Please Wait' %}",
text: "{% trans 'Loading' %}...",
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
}
});
});
function getAllFormData() {
const forms = document.querySelectorAll('form');
const formData = {};
forms.forEach((form, index) => {
const formId = form.id || `form${index + 1}`;
formData[formId] = {};
const formElements = form.elements;
for (let element of formElements) {
if (element.name) {
formData[formId][element.name] = element.value;
}
function hideLoading() {
Swal.close();
}
function notify(tag,msg){
Swal.fire({
icon: tag,
titleText: msg
});
}
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== "") {
const cookies = document.cookie.split(";");
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.substring(0, name.length + 1) === name + "=") {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
</script>
});
return formData;
}
{% endblock customJS %}
function showLoading() {
Swal.fire({
title: "{% trans 'Please Wait' %}",
text: "{% trans 'Loading' %}...",
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
}
});
}
function hideLoading() {
Swal.close();
}
function notify(tag,msg){
Swal.fire({
icon: tag,
titleText: msg
});
}
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== "") {
const cookies = document.cookie.split(";");
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.substring(0, name.length + 1) === name + "=") {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
</script>
{% endblock customJS %}

132
templates/account/signup.html
View File

@ -5,84 +5,84 @@
{% block title %}{{ _("Sign Up") }}{% endblock title %}
{% block content %}
<div class="row">
<div class="row">
<div class="row min-vh-100 text-center">
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
<div class="text-center">
<h3 class="text-body-highlight">Sign Up</h3>
<p class="text-body-tertiary">Create your account today</p>
</div>
<!-- Passkey Signup -->
{% if PASSKEY_SIGNUP_ENABLED %}
<hr class="my-4">
<div class="d-grid gap-2">
<a href="{{ signup_by_passkey_url }}" class="btn btn-outline-primary btn-lg">
{{ _("Sign up using a passkey") }}
<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</div>
</a>
</div>
{% endif %}
<div class="text-center">
<h3 class="text-body-highlight">Sign Up</h3>
<p class="text-body-tertiary">Create your account today</p>
</div>
<!-- Passkey Signup -->
{% if PASSKEY_SIGNUP_ENABLED %}
<hr class="my-4">
<div class="d-grid gap-2">
<a href="{{ signup_by_passkey_url }}" class="btn btn-outline-primary btn-lg">
{{ _("Sign up using a passkey") }}
</a>
</div>
{% endif %}
<!-- Social Signup -->
{% if SOCIALACCOUNT_ENABLED %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
<!-- Sign Up Form -->
{% if not SOCIALACCOUNT_ONLY %}
<form method="post" action="{% url 'account_signup' %}" class="needs-validation" novalidate>
{% csrf_token %}
{{ redirect_field }}
<div class="mb-3">
<label for="id_email" class="form-label">{{ form.email.label }}</label>
<input type="email" class="form-control" id="id_email" name="email" placeholder="name@example.com">
{% if form.email.errors %}
<div class="text-danger">{{ form.email.errors|striptags }}</div>
{% endif %}
</div>
{% if not SOCIALACCOUNT_ONLY %}
<form method="post" action="{% url 'account_signup' %}" class="needs-validation" novalidate>
{% csrf_token %}
{{ redirect_field }}
<div class="mb-3">
<label for="id_email" class="form-label">{{ form.email.label }}</label>
<input type="email" class="form-control" id="id_email" name="email" placeholder="name@example.com">
{% if form.email.errors %}
<div class="text-danger">{{ form.email.errors|striptags }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="id_password1" class="form-label">{{ form.password1.label }}</label>
<div class="position-relative" data-password="data-password">
<input type="password" class="form-control form-icon-input pe-6" id="id_password1" name="password1" data-password-input="data-password-input" placeholder="Password">
<a class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary" data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></a>
</div>
{% if form.password1.errors %}
<div class="text-danger">{{ form.password1.errors|striptags }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="id_password1" class="form-label">{{ form.password1.label }}</label>
<div class="position-relative" data-password="data-password">
<input type="password" class="form-control form-icon-input pe-6" id="id_password1" name="password1" data-password-input="data-password-input" placeholder="Password">
<a class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary" data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></a>
</div>
{% if form.password1.errors %}
<div class="text-danger">{{ form.password1.errors|striptags }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="id_password2" class="form-label">{{ form.password2.label }}</label>
<div class="position-relative" data-password="data-password">
<input type="password" class="form-control form-icon-input pe-6" id="id_password2" name="password2" data-password-input="data-password-input" placeholder="Confirm Password">
<a class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary" data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></a>
</div>
{% if form.password2.errors %}
<div class="text-danger">{{ form.password2.errors|striptags }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="id_password2" class="form-label">{{ form.password2.label }}</label>
<div class="position-relative" data-password="data-password">
<input type="password" class="form-control form-icon-input pe-6" id="id_password2" name="password2" data-password-input="data-password-input" placeholder="Confirm Password">
<a class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary" data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></a>
</div>
{% if form.password2.errors %}
<div class="text-danger">{{ form.password2.errors|striptags }}</div>
{% endif %}
</div>
<div class="form-check mb-3">
<div class="form-check mb-3">
<input class="form-check-input" id="termsService" type="checkbox" />
<label class="form-label fs-9 text-transform-none" for="termsService">I accept the <a href="">terms </a>and <a href="">privacy policy</a></label>
</div>
<button type="submit" class="btn btn-primary w-100 mb-3">{{ _("Sign Up") }}</button>
<div class="text-center">{% trans 'Already have an account?' %}<a class="fw-bold" href="{% url 'account_login' %}"> {{ _("Sign In") }}</a></div>
</form>
{% endif %}
</div>
<input class="form-check-input" id="termsService" type="checkbox" />
<label class="form-label fs-9 text-transform-none" for="termsService">I accept the <a href="">terms </a>and <a href="">privacy policy</a></label>
</div>
<button type="submit" class="btn btn-primary w-100 mb-3">{{ _("Sign Up") }}</button>
<div class="text-center">{% trans 'Already have an account?' %}<a class="fw-bold" href="{% url 'account_login' %}"> {{ _("Sign In") }}</a></div>
</form>
{% endif %}
</div>
</div>
</div>
</div>

2
templates/account/snippets/already_logged_in.html
View File

@ -6,6 +6,6 @@
<div class="alert alert-phoenix-danger d-flex fs-9" role="alert">
<span class="fas fa-info-circle fs-8 me-3"></span>
<strong>{% trans 'Note' %}:</strong>
{% blocktranslate %}You are already logged in as {{ user_display }}.{% endblocktranslate %}
{% blocktranslate %}You are already logged in as {{ user_display }}.{% endblocktranslate %}
</div>

4
templates/account/user_settings.html
View File

@ -10,7 +10,7 @@
{% csrf_token %}
<div class="col-12 col-xl-8">
<div class="border-bottom mb-4">
<div class="row gx-3 mb-6 gy-6 gy-sm-3">
<div class="col-12 col-sm-8">
<h4 class="mb-4">Default Invoice Accounts</h4>
@ -41,7 +41,7 @@
</div>
<div class="text-start mb-6">
<div>
<div>
<button type="submit" class="btn btn-phoenix-primary">Update</button>
</div>
</div>

30
templates/account/verfied_email_required.html
View File

@ -7,23 +7,23 @@
{% block content %}
<div class="row">
<div class="row flex-center min-vh-50 py-5">
<div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<h3>
{% trans "Verify Your Email Address" %}
</h3>
<div class="row flex-center min-vh-50 py-5">
<div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<h3>
{% trans "Verify Your Email Address" %}
</h3>
<p>
{% blocktrans %}We have sent an email to you for verification. Follow the link provided to finalize the signup process. If you do not see the verification email in your main inbox, check your spam folder. Please contact us if you do not receive the verification email within a few minutes.{% endblocktrans %}
</p>
<p>
{% blocktrans %}We have sent an email to you for verification. Follow the link provided to finalize the signup process. If you do not see the verification email in your main inbox, check your spam folder. Please contact us if you do not receive the verification email within a few minutes.{% endblocktrans %}
</p>
</div>
</div>
</div>
</div>
{% endblock content %}

32
templates/account/verification_sent.html
View File

@ -5,23 +5,23 @@
{% trans "Verify Your Email Address" %}
{% endblock head_title %}
{% block content %}
<div class="row">
<div class="row flex-center min-vh-50 py-5">
<div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<h3>
{% trans "Verify Your Email Address" %}
</h3>
<div class="row">
<div class="row flex-center min-vh-50 py-5">
<div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<h3>
{% trans "Verify Your Email Address" %}
</h3>
<p>
{% blocktrans %}We have sent an email to you for verification. Follow the link provided to finalize the signup process. If you do not see the verification email in your main inbox, check your spam folder. Please contact us if you do not receive the verification email within a few minutes.{% endblocktrans %}
</p>
<p>
{% blocktrans %}We have sent an email to you for verification. Follow the link provided to finalize the signup process. If you do not see the verification email in your main inbox, check your spam folder. Please contact us if you do not receive the verification email within a few minutes.{% endblocktrans %}
</p>
</div>
</div>
</div>
</div>
{% endblock content %}

52
templates/account/verified_email_required.html
View File

@ -6,33 +6,33 @@
{% endblock head_title %}
{% block content %}
<div class="row">
<div class="row flex-center min-vh-50 py-5">
<div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<h3>
{% trans "Verify Your Email Address" %}
</h3>
<div class="row flex-center min-vh-50 py-5">
<div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
<a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
</div>
</a>
<h3>
{% trans "Verify Your Email Address" %}
</h3>
{% url 'account_email' as email_url %}
<p>
{% blocktrans %}This part of the site requires us to verify that
you are who you claim to be. For this purpose, we require that you
verify ownership of your email address. {% endblocktrans %}
</p>
<p>
{% blocktrans %}We have sent an email to you for
verification. Please click on the link inside that email. If you do not see the verification email in your main inbox, check your spam folder. Otherwise
contact us if you do not receive it within a few minutes.{% endblocktrans %}
</p>
<p>
{% blocktrans %}<strong>Note:</strong> you can still <a href="{{ email_url }}">change your email address</a>.{% endblocktrans %}
</p>
{% url 'account_email' as email_url %}
<p>
{% blocktrans %}This part of the site requires us to verify that
you are who you claim to be. For this purpose, we require that you
verify ownership of your email address. {% endblocktrans %}
</p>
<p>
{% blocktrans %}We have sent an email to you for
verification. Please click on the link inside that email. If you do not see the verification email in your main inbox, check your spam folder. Otherwise
contact us if you do not receive it within a few minutes.{% endblocktrans %}
</p>
<p>
{% blocktrans %}<strong>Note:</strong> you can still <a href="{{ email_url }}">change your email address</a>.{% endblocktrans %}
</p>
</div>
</div>
</div>
</div>
{% endblock content %}

134
templates/administration/display_appointment.html
View File

@ -6,89 +6,89 @@
{% block description %}{{ page_description }}{% endblock %}
{% block content %}
<div class="container py-5">
<div class="card bg-body">
<div class="card-header ">
<h4 class="mb-0">{{ page_title }}</h4>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-calendar-alt me-2 text-primary"></i>
<strong class="me-2">{% trans 'Date' %}:</strong> {{ appointment.get_date }}
<div class="container py-5">
<div class="card bg-body">
<div class="card-header ">
<h4 class="mb-0">{{ page_title }}</h4>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-calendar-alt me-2 text-primary"></i>
<strong class="me-2">{% trans 'Date' %}:</strong> {{ appointment.get_date }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-clock me-2 text-primary"></i>
<strong class="me-2">{% trans 'Start time' %}:</strong> {{ appointment.get_start_time|time:"g:i A" }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-clock me-2 text-primary"></i>
<strong class="me-2">{% trans 'Start time' %}:</strong> {{ appointment.get_start_time|time:"g:i A" }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-clock me-2 text-primary"></i>
<strong class="me-2">{% trans 'End time' %}:</strong> {{ appointment.get_end_time|time:"g:i A" }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-clock me-2 text-primary"></i>
<strong class="me-2">{% trans 'End time' %}:</strong> {{ appointment.get_end_time|time:"g:i A" }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-hands-helping me-2 text-primary"></i>
<strong class="me-2">{% trans 'Service' %}:</strong> {{ appointment.get_service_name }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-hands-helping me-2 text-primary"></i>
<strong class="me-2">{% trans 'Service' %}:</strong> {{ appointment.get_service_name }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-user me-2 text-primary"></i>
<strong class="me-2">{% trans 'Client' %}:</strong> {{ appointment.get_client_name }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-user me-2 text-primary"></i>
<strong class="me-2">{% trans 'Client' %}:</strong> {{ appointment.get_client_name }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-envelope me-2 text-primary"></i>
<strong class="me-2">{% trans 'Email' %}:</strong> {{ appointment.client.email }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-envelope me-2 text-primary"></i>
<strong class="me-2">{% trans 'Email' %}:</strong> {{ appointment.client.email }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-phone me-2 text-primary"></i>
<strong class="me-2">{% trans 'Phone' %}:</strong> {{ appointment.phone }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-phone me-2 text-primary"></i>
<strong class="me-2">{% trans 'Phone' %}:</strong> {{ appointment.phone }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-comment me-2 text-primary"></i>
<strong class="me-2">{% trans 'Wants reminder' %}:</strong> {{ appointment.want_reminder }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-comment me-2 text-primary"></i>
<strong class="me-2">{% trans 'Wants reminder' %}:</strong> {{ appointment.want_reminder }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-map-marker-alt me-2 text-primary"></i>
<strong class="me-2">{% trans 'Client address' %}:</strong> {{ appointment.address }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-map-marker-alt me-2 text-primary"></i>
<strong class="me-2">{% trans 'Client address' %}:</strong> {{ appointment.address }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-info-circle me-2 text-primary"></i>
<strong class="me-2">{% trans 'Additional Information' %}:</strong> {{ appointment.additional_info }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-info-circle me-2 text-primary"></i>
<strong class="me-2">{% trans 'Additional Information' %}:</strong> {{ appointment.additional_info }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-money-bill-wave me-2 text-primary"></i>
<strong class="me-2">{% trans 'Is paid' %}:</strong> {{ appointment.is_paid_text }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-money-bill-wave me-2 text-primary"></i>
<strong class="me-2">{% trans 'Is paid' %}:</strong> {{ appointment.is_paid_text }}
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-dollar-sign me-2 text-primary"></i>
<strong class="me-2">{% trans 'Service price' %}:</strong> {{ appointment.get_appointment_amount_to_pay_text }}
<div class="col-md-6">
<div class="d-flex align-items-center">
<i class="fas fa-dollar-sign me-2 text-primary"></i>
<strong class="me-2">{% trans 'Service price' %}:</strong> {{ appointment.get_appointment_amount_to_pay_text }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}

188
templates/administration/manage_service.html
View File

@ -9,126 +9,126 @@
{% block content %}
{% translate "Confirm Deletion" as modal_title %}
{% translate "Delete" as delete_btn_modal %}
<div class="row">
<div class="col-6">
<h3 class="mb-3">{{ page_title }}</h3>
<form class="form" method="post" enctype="multipart/form-data">
{% csrf_token %}
{% translate "Delete" as delete_btn_modal %}
<div class="row">
<div class="col-6">
<h3 class="mb-3">{{ page_title }}</h3>
<form class="form" method="post" enctype="multipart/form-data">
{% csrf_token %}
<!-- Name Field -->
<div class="form-floating mb-3">
{{ form.name|add_class:"form-control form-control-sm" }}
<label for="{{ form.name.id_for_label }}">{{ _("Name") }}</label>
{% if form.name.errors %}
<div class="alert alert-danger mt-2">
{{ form.name.errors }}
<div class="form-floating mb-3">
{{ form.name|add_class:"form-control form-control-sm" }}
<label for="{{ form.name.id_for_label }}">{{ _("Name") }}</label>
{% if form.name.errors %}
<div class="alert alert-danger mt-2">
{{ form.name.errors }}
</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Description Field -->
<div class="form-floating mb-3">
{{ form.description|add_class:"form-control form-control-sm" }}
<label for="{{ form.description.id_for_label }}">{{ _("Description") }}</label>
{% if form.description.errors %}
<div class="alert alert-danger mt-2">
{{ form.description.errors }}
<div class="form-floating mb-3">
{{ form.description|add_class:"form-control form-control-sm" }}
<label for="{{ form.description.id_for_label }}">{{ _("Description") }}</label>
{% if form.description.errors %}
<div class="alert alert-danger mt-2">
{{ form.description.errors }}
</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Duration Field -->
<div class="form-floating mb-3">
{{ form.duration|add_class:"form-control form-control-sm" }}
<label for="{{ form.duration.id_for_label }}">{{ _("Duration") }}</label>
{% if form.duration.errors %}
<div class="alert alert-danger mt-2">
{{ form.duration.errors }}
<div class="form-floating mb-3">
{{ form.duration|add_class:"form-control form-control-sm" }}
<label for="{{ form.duration.id_for_label }}">{{ _("Duration") }}</label>
{% if form.duration.errors %}
<div class="alert alert-danger mt-2">
{{ form.duration.errors }}
</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Price Field -->
<div class="form-floating mb-3">
{{ form.price|add_class:"form-control form-control-sm" }}
<label for="{{ form.price.id_for_label }}">{{ _("Price") }}</label>
{% if form.price.errors %}
<div class="alert alert-danger mt-2">
{{ form.price.errors }}
<div class="form-floating mb-3">
{{ form.price|add_class:"form-control form-control-sm" }}
<label for="{{ form.price.id_for_label }}">{{ _("Price") }}</label>
{% if form.price.errors %}
<div class="alert alert-danger mt-2">
{{ form.price.errors }}
</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Down Payment Field -->
<div class="form-floating mb-3">
{{ form.down_payment|add_class:"form-control form-control-sm" }}
<label for="{{ form.down_payment.id_for_label }}">{{ _("Down Payment")}}</label>
{% if form.down_payment.errors %}
<div class="alert alert-danger mt-2">
{{ form.down_payment.errors }}
<div class="form-floating mb-3">
{{ form.down_payment|add_class:"form-control form-control-sm" }}
<label for="{{ form.down_payment.id_for_label }}">{{ _("Down Payment")}}</label>
{% if form.down_payment.errors %}
<div class="alert alert-danger mt-2">
{{ form.down_payment.errors }}
</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Image Field -->
<div class="mb-3">
<label for="{{ form.image.id_for_label }}" class="form-label">{{ _("Image") }}</label>
{{ form.image }}
{% if form.image.errors %}
<div class="alert alert-danger mt-2">
{{ form.image.errors }}
<div class="mb-3">
<label for="{{ form.image.id_for_label }}" class="form-label">{{ _("Image") }}</label>
{{ form.image }}
{% if form.image.errors %}
<div class="alert alert-danger mt-2">
{{ form.image.errors }}
</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Currency Field -->
<div class="form-floating mb-3">
<select name="currency" id="id_currency" class="form-select form-control-sm" >
<option class="currency" value="SAR">{{ CURRENCY }}</option>
</select>
<label for="id_currency"><span class="currency"> {{ CURRENCY }}</span></label>
{% if form.currency.errors %}
<div class="alert alert-danger mt-2">
{{ form.currency.errors }}
<div class="form-floating mb-3">
<select name="currency" id="id_currency" class="form-select form-control-sm" >
<option class="currency" value="SAR">{{ CURRENCY }}</option>
</select>
<label for="id_currency"><span class="currency"> {{ CURRENCY }}</span></label>
{% if form.currency.errors %}
<div class="alert alert-danger mt-2">
{{ form.currency.errors }}
</div>
{% endif %}
</div>
{% endif %}
</div>
<!-- Background Color Field -->
<div class="form-floating mb-3">
<input type="color" value="#000000" id="{{ form.background_color.id_for_label }}" class="form-control form-control-sm" >
<label for="{{ form.background_color.id_for_label }}">{{ _("Background Color")}}</label>
{% if form.background_color.errors %}
<div class="alert alert-danger mt-2">
{{ form.background_color.errors }}
</div>
{% endif %}
</div>
{% if btn_text %}
<button type="submit" class="btn btn-sm btn-phoenix-primary">{{ btn_text }}</button>
{% else %}
{% if request.user.is_superuser and service.id %}
{% translate "Are you sure you want to delete this service?" as d_modal_message %}
<div class="service-btn-container">
<a href="{% url 'appointment:update_service' service_id=service.id %}"
class="btn btn-sm btn-phoenix-primary">
<i class="fas fa-pen"></i>
</a>
<a href="javascript:void(0)"
onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_service' service_id=service.id %}', null)"
class="btn btn-sm btn-phoenix-danger">
<i class="fas fa-trash"></i>
</a>
</div>
{% endif %}
<div class="form-floating mb-3">
<input type="color" value="#000000" id="{{ form.background_color.id_for_label }}" class="form-control form-control-sm" >
<label for="{{ form.background_color.id_for_label }}">{{ _("Background Color")}}</label>
{% if form.background_color.errors %}
<div class="alert alert-danger mt-2">
{{ form.background_color.errors }}
</div>
{% endif %}
</form>
</div>
{% if btn_text %}
<button type="submit" class="btn btn-sm btn-phoenix-primary">{{ btn_text }}</button>
{% else %}
{% if request.user.is_superuser and service.id %}
{% translate "Are you sure you want to delete this service?" as d_modal_message %}
<div class="service-btn-container">
<a href="{% url 'appointment:update_service' service_id=service.id %}"
class="btn btn-sm btn-phoenix-primary">
<i class="fas fa-pen"></i>
</a>
<a href="javascript:void(0)"
onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_service' service_id=service.id %}', null)"
class="btn btn-sm btn-phoenix-danger">
<i class="fas fa-trash"></i>
</a>
</div>
{% endif %}
{% endif %}
</form>
</div>
</div>
</div>
{% include 'modal/confirm_modal.html' %}
{% endblock %}

2
templates/administration/manage_staff_member.html
View File

@ -34,7 +34,7 @@
</div>
<div class="form-group">
{{ form.slot_duration.label_tag }}
{{ form.slot_duration.label_tag }}
{{ form.slot_duration }}
<small>{{ form.slot_duration.help_text }}</small>
</div>

56
templates/administration/manage_staff_personal_info.html
View File

@ -8,38 +8,38 @@
{% block content %}
<div class="row">
<div class="col-6">
<h3 class="mb-3">{% trans 'Staff Personal Information' %}</h3>
<form id="updatePersonalInfoForm" method="post" action="">
{% csrf_token %}
<div class="col-6">
<h3 class="mb-3">{% trans 'Staff Personal Information' %}</h3>
<form id="updatePersonalInfoForm" method="post" action="">
{% csrf_token %}
<div class="form-floating mb-3">
{{ form.first_name }}
<label for="first_name">{{ _("First Name") }}</label>
<div class="form-floating mb-3">
{{ form.first_name }}
<label for="first_name">{{ _("First Name") }}</label>
</div>
<div class="form-floating mb-3">
{{ form.last_name }}
<label for="last_name">{{ _("Last Name") }}</label>
</div>
<div class="form-floating mb-3">
{{ form.email }}
<label for="email">{{ _("Email") }}</label>
</div>
<button type="submit" class="btn btn-phoenix-primary">{{ btn_text }}</button>
</form>
<div class="messages" style="margin: 20px 0">
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
</div>
<div class="form-floating mb-3">
{{ form.last_name }}
<label for="last_name">{{ _("Last Name") }}</label>
</div>
<div class="form-floating mb-3">
{{ form.email }}
<label for="email">{{ _("Email") }}</label>
</div>
<button type="submit" class="btn btn-phoenix-primary">{{ btn_text }}</button>
</form>
<div class="messages" style="margin: 20px 0">
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
{% endblock %}

106
templates/administration/manage_working_hours.html
View File

@ -12,66 +12,66 @@
<div class="row">
<div class="col-6">
<h3>{% trans "Manage Working Hours" %}</h3>
<form class="form" method="post" action="" id="workingHoursForm"
data-action="{% if working_hours_instance %}update{% else %}create{% endif %}"
data-working-hours-id="
{% if working_hours_instance %}{{ working_hours_instance.id }}{% else %}0{% endif %}"
data-staff-user-id="{% if staff_user_id %}{{ staff_user_id }}{% else %}0{% endif %}">
{% csrf_token %}
{% if working_hours_form.staff_member %}
<div class="form-group mb-3">
<label class="form-label" for="{{ working_hours_form.staff_member.id_for_label }}">{% trans 'Staff Member' %}:</label>
{{ working_hours_form.staff_member }}
</div>
{% endif %}
<h3>{% trans "Manage Working Hours" %}</h3>
<form class="form" method="post" action="" id="workingHoursForm"
data-action="{% if working_hours_instance %}update{% else %}create{% endif %}"
data-working-hours-id="
{% if working_hours_instance %}{{ working_hours_instance.id }}{% else %}0{% endif %}"
data-staff-user-id="{% if staff_user_id %}{{ staff_user_id }}{% else %}0{% endif %}">
{% csrf_token %}
{% if working_hours_form.staff_member %}
<div class="form-group mb-3">
<label class="form-label" for="{{ working_hours_form.day_of_week.id_for_label }}">{% trans 'Day of Week' %}:</label>
{{ working_hours_form.day_of_week|add_class:"form-select form-select-sm" }}
<label class="form-label" for="{{ working_hours_form.staff_member.id_for_label }}">{% trans 'Staff Member' %}:</label>
{{ working_hours_form.staff_member }}
</div>
{% endif %}
<div class="form-group mb-3">
<label class="form-label" for="{{ working_hours_form.start_time.id_for_label }}">{% trans 'Start time' %}:</label>
<div class="input-group time24hr" id="start-timepicker" data-target-input="nearest">
<input type="text" class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
data-target="#start-timepicker" name="{{ working_hours_form.start_time.name }}"
value="{{ working_hours_form.start_time.value|default:'09:00 AM' }}"
id="{{ working_hours_form.start_time.id_for_label }}">
<div class="input-group-text" data-toggle="datetimepicker" data-target="#start-timepicker"><i class="far fa-clock"></i></div>
</div>
</div>
<div class="form-group mb-3">
<label class="form-label" for="{{ working_hours_form.end_time.id_for_label }}">{% trans 'End time' %}:</label>
<div class="input-group date" id="end-timepicker" data-target-input="nearest">
<input type="text" class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
data-target="#end-timepicker" name="{{ working_hours_form.end_time.name }}"
value="{{ working_hours_form.end_time.value|default:'05:00 PM' }}"
id="{{ working_hours_form.end_time.id_for_label }}">
<div class="input-group-text" data-toggle="datetimepicker" data-target="#end-timepicker"><i class="far fa-clock"></i></div>
</div>
</div>
<button type="submit" class="btn btn-sm btn-phoenix-primary">{{ button_text }}</button>
<input type="hidden" id="addWorkingHoursUrl"
value="{% url 'appointment:add_working_hours_id' staff_user_id|default:user.id %}">
<input type="hidden" id="updateWorkingHoursUrl"
value="{% url 'appointment:update_working_hours_id' working_hours_id|default:0 staff_user_id|default:user.id %}">
</form>
{% include 'modal/error_modal.html' %}
<div class="messages" style="margin: 20px 0">
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
<div class="form-group mb-3">
<label class="form-label" for="{{ working_hours_form.day_of_week.id_for_label }}">{% trans 'Day of Week' %}:</label>
{{ working_hours_form.day_of_week|add_class:"form-select form-select-sm" }}
</div>
<div class="form-group mb-3">
<label class="form-label" for="{{ working_hours_form.start_time.id_for_label }}">{% trans 'Start time' %}:</label>
<div class="input-group time24hr" id="start-timepicker" data-target-input="nearest">
<input type="text" class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
data-target="#start-timepicker" name="{{ working_hours_form.start_time.name }}"
value="{{ working_hours_form.start_time.value|default:'09:00 AM' }}"
id="{{ working_hours_form.start_time.id_for_label }}">
<div class="input-group-text" data-toggle="datetimepicker" data-target="#start-timepicker"><i class="far fa-clock"></i></div>
</div>
</div>
<div class="form-group mb-3">
<label class="form-label" for="{{ working_hours_form.end_time.id_for_label }}">{% trans 'End time' %}:</label>
<div class="input-group date" id="end-timepicker" data-target-input="nearest">
<input type="text" class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
data-target="#end-timepicker" name="{{ working_hours_form.end_time.name }}"
value="{{ working_hours_form.end_time.value|default:'05:00 PM' }}"
id="{{ working_hours_form.end_time.id_for_label }}">
<div class="input-group-text" data-toggle="datetimepicker" data-target="#end-timepicker"><i class="far fa-clock"></i></div>
</div>
</div>
<button type="submit" class="btn btn-sm btn-phoenix-primary">{{ button_text }}</button>
<input type="hidden" id="addWorkingHoursUrl"
value="{% url 'appointment:add_working_hours_id' staff_user_id|default:user.id %}">
<input type="hidden" id="updateWorkingHoursUrl"
value="{% url 'appointment:update_working_hours_id' working_hours_id|default:0 staff_user_id|default:user.id %}">
</form>
{% include 'modal/error_modal.html' %}
<div class="messages" style="margin: 20px 0">
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
{% endblock %}
{% block customJS %}
<!-- JS -->

108
templates/administration/service_list.html
View File

@ -9,61 +9,61 @@
{% trans 'Service List' %}.
{% endblock %}
{% block body %}
{% translate "Confirm Deletion" as modal_title %}
{% translate "Delete" as delete_btn_modal %}
<div class="row">
<div class="col-6">
<h2 class="section-header-itm">{% trans 'Service List' %}</h2>
</div>
<div class="table-responsive px-1">
<table class="table table-sm fs-9 mb-0">
<thead>
<tr>
<th class="fw-bold"></th>
<th class="fw-bold">{% trans 'Name' %}</th>
<th class="fw-bold">{% trans 'Duration' %}</th>
<th class="fw-bold">{% trans 'Price' %}</th>
<th class="fw-bold">{% trans 'Action' %}</th>
</tr>
</thead>
<tbody>
{% for service in services %}
<tr>
<td><img class="rounded-soft" src="{{ service.get_image_url }}" alt="" style="width: 35px; height: 35px;"/></td>
<td>{{ service.name }}</td>
<td>{{ service.get_duration }}</td>
<td>{{ service.get_price_text }}</td>
<td>
<div class="btn-group btn-group-sm">
<a href="{% url 'appointment:view_service' service_id=service.id view=1 %}"
class="btn btn-sm btn-phoenix-success me-2">
<i class="fas fa-eye"></i>
</a>
{% translate "Are you sure you want to delete this service?" as d_modal_message %}
{% if request.user.is_superuser %}
<a href="{% url 'appointment:update_service' service_id=service.id %}"
class="btn btn-sm btn-phoenix-primary me-2">
<i class="fas fa-pen"></i>
</a>
<a href="javascript:void(0)"
onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_service' service_id=service.id %}', null)"
class="btn btn-sm btn-phoenix-danger me-2">
<i class="fas fa-trash"></i>
</a>
{% endif %}
</div>
</td>
</tr>
{% empty %}
<tr>
<td colspan="3">{% trans 'No service found' %}.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% include 'modal/confirm_modal.html' %}
{% translate "Confirm Deletion" as modal_title %}
{% translate "Delete" as delete_btn_modal %}
<div class="row">
<div class="col-6">
<h2 class="section-header-itm">{% trans 'Service List' %}</h2>
</div>
<div class="table-responsive px-1">
<table class="table table-sm fs-9 mb-0">
<thead>
<tr>
<th class="fw-bold"></th>
<th class="fw-bold">{% trans 'Name' %}</th>
<th class="fw-bold">{% trans 'Duration' %}</th>
<th class="fw-bold">{% trans 'Price' %}</th>
<th class="fw-bold">{% trans 'Action' %}</th>
</tr>
</thead>
<tbody>
{% for service in services %}
<tr>
<td><img class="rounded-soft" src="{{ service.get_image_url }}" alt="" style="width: 35px; height: 35px;"/></td>
<td>{{ service.name }}</td>
<td>{{ service.get_duration }}</td>
<td>{{ service.get_price_text }}</td>
<td>
<div class="btn-group btn-group-sm">
<a href="{% url 'appointment:view_service' service_id=service.id view=1 %}"
class="btn btn-sm btn-phoenix-success me-2">
<i class="fas fa-eye"></i>
</a>
{% translate "Are you sure you want to delete this service?" as d_modal_message %}
{% if request.user.is_superuser %}
<a href="{% url 'appointment:update_service' service_id=service.id %}"
class="btn btn-sm btn-phoenix-primary me-2">
<i class="fas fa-pen"></i>
</a>
<a href="javascript:void(0)"
onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_service' service_id=service.id %}', null)"
class="btn btn-sm btn-phoenix-danger me-2">
<i class="fas fa-trash"></i>
</a>
{% endif %}
</div>
</td>
</tr>
{% empty %}
<tr>
<td colspan="3">{% trans 'No service found' %}.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% include 'modal/confirm_modal.html' %}
</div>
{% endblock %}

4
templates/administration/staff_index.html
View File

@ -36,7 +36,7 @@
</section>
<div id="customContextMenu" style="display: none; position: absolute; z-index: 1000;">
<a id="newAppointmentOption" class="btn btn-sm btn-phoenix-success rounded-pill me-1 mb-1" href="#">{{ _("New Appointment")}}</a>
<a id="newAppointmentOption" class="btn btn-sm btn-phoenix-success rounded-pill me-1 mb-1" href="#">{{ _("New Appointment")}}</a>
</div>
@ -94,7 +94,7 @@
<script src="{% static 'js/modal/show_modal.js' %}"></script>
<script src="{% static 'js/js-utils.js' %}"></script>
<script>
<script>
function createCommonInputFields(appointment, servicesDropdown, isEditMode, defaultStartTime, staffDropdown) {
const startTimeValue = isEditMode ? moment(appointment.start_time).format('HH:mm:ss') : defaultStartTime;
const disabledAttribute = isEditMode ? '' : 'disabled';

94
templates/administration/staff_list.html
View File

@ -5,7 +5,7 @@
{% endblock %}
{% block title %}
{{ _("Staff Members List")}}
{{ _("Staff Members List")}}
{% endblock %}
{% block description %}
{% trans 'List of all staff members' %}.
@ -13,53 +13,53 @@
{% block body %}
<div class="row">
<div class="col-6">
<h3 class="section-header-itm">{% trans 'Staff Members' %}</h3>
<div class="buttons-container section-header-itm">
<a href="{{ btn_staff_me_link }}"
class="btn btn-sm btn-phoenix-info">
{{ btn_staff_me }}
</a>
<a href="{% url 'appointment:add_staff_member_info' %}"
class="btn btn-sm btn-phoenix-success">{{ _("Add") }}
<i class="fas fa-add"></i>
</a>
</div>
</div>
<div class="table-responsive">
<table class="table table-sm fs-9 mb-0">
<thead>
<tr>
<th>{% trans 'Name' %}</th>
<th>{% trans 'Email' %}</th>
<th>{% trans 'Details' %}</th>
</tr>
</thead>
<tbody>
{% for staff_member in staff_members %}
<tr>
<td>{{ staff_member.get_staff_member_name }}</td>
<td>{{ staff_member.user.email|default:"N/A" }}</td>
<td>
<a href="{% url 'appointment:user_profile' staff_member.user.id %}"
class="btn btn-sm btn-phoenix-primary">{% trans 'View Profile' %}</a>
<a href="{% url 'appointment:remove_staff_member' staff_member.user.id %}"
class="btn btn-sm btn-phoenix-danger">{% trans 'Remove' %}</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="3">{% trans 'No staff members found' %}.</td>
</tr>
{% endfor %}
<small>
{% trans "PS: Remove means, deleting the staff status of the user. The user account is still active." %}
</small>
</tbody>
</table>
</div>
<div class="row">
<div class="col-6">
<h3 class="section-header-itm">{% trans 'Staff Members' %}</h3>
<div class="buttons-container section-header-itm">
<a href="{{ btn_staff_me_link }}"
class="btn btn-sm btn-phoenix-info">
{{ btn_staff_me }}
</a>
<a href="{% url 'appointment:add_staff_member_info' %}"
class="btn btn-sm btn-phoenix-success">{{ _("Add") }}
<i class="fas fa-add"></i>
</a>
</div>
</div>
<div class="table-responsive">
<table class="table table-sm fs-9 mb-0">
<thead>
<tr>
<th>{% trans 'Name' %}</th>
<th>{% trans 'Email' %}</th>
<th>{% trans 'Details' %}</th>
</tr>
</thead>
<tbody>
{% for staff_member in staff_members %}
<tr>
<td>{{ staff_member.get_staff_member_name }}</td>
<td>{{ staff_member.user.email|default:"N/A" }}</td>
<td>
<a href="{% url 'appointment:user_profile' staff_member.user.id %}"
class="btn btn-sm btn-phoenix-primary">{% trans 'View Profile' %}</a>
<a href="{% url 'appointment:remove_staff_member' staff_member.user.id %}"
class="btn btn-sm btn-phoenix-danger">{% trans 'Remove' %}</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="3">{% trans 'No staff members found' %}.</td>
</tr>
{% endfor %}
<small>
{% trans "PS: Remove means, deleting the staff status of the user. The user account is still active." %}
</small>
</tbody>
</table>
</div>
</div>
{% endblock %}

248
templates/administration/user_profile.html
View File

@ -12,89 +12,89 @@
{% endblock %}
{% block content %}
<div class="row mt-4">
<div class="col-6">
{% translate "Confirm Deletion" as modal_title %}
{% translate "Delete" as delete_btn_modal %}
<div class="row mt-4">
<div class="col-6">
{% translate "Confirm Deletion" as modal_title %}
{% translate "Delete" as delete_btn_modal %}
<h3>{% trans 'Personal Information' %}</h3>
<h3>{% trans 'Personal Information' %}</h3>
<!-- Display fields from PersonalInformationForm -->
<div class="section-content">
<p><strong>{% trans 'First name' %}:</strong> {{ user.first_name }}</p>
<p><strong>{% trans 'Last name' %}:</strong> {{ user.last_name }}</p>
<p><strong>{% trans 'Email' %}:</strong> {{ user.email }}</p>
</div>
<a href="{% url 'appointment:update_user_info' user.id %}"
class="btn btn-sm btn-phoenix-primary">
<i class="fas fa-pen"></i>
</a>
</div>
<div class="section-content">
<p><strong>{% trans 'First name' %}:</strong> {{ user.first_name }}</p>
<p><strong>{% trans 'Last name' %}:</strong> {{ user.last_name }}</p>
<p><strong>{% trans 'Email' %}:</strong> {{ user.email }}</p>
</div>
<a href="{% url 'appointment:update_user_info' user.id %}"
class="btn btn-sm btn-phoenix-primary">
<i class="fas fa-pen"></i>
</a>
</div>
</div>
<!-- Appointment Information Section -->
<div class="row mt-4">
<div class="col-6">
<h3>{% trans 'Appointments Information' %}</h3>
<small>
{{ service_msg }}
</small>
{% if staff_member %}
<div class="section-content">
<p>
<strong>{% trans 'Slot duration' %}:</strong> {{ staff_member.get_slot_duration_text }}
<i class="fas fa-info-circle" data-toggle="tooltip"
title="{{ slot_duration_help_text }}"></i>
</p>
<p><strong>{% trans 'General start time' %}:</strong> {{ staff_member.get_lead_time }}</p>
<p><strong>{% trans 'General end time' %}:</strong> {{ staff_member.get_finish_time }}</p>
<p>
<strong>{% trans 'Weekend days you work' %}:</strong> {{ staff_member.get_weekend_days_worked_text }}
</p>
<div class="row mt-4">
<div class="col-6">
<h3>{% trans 'Appointments Information' %}</h3>
<small>
{{ service_msg }}
</small>
{% if staff_member %}
<div class="section-content">
<p>
<strong>{% trans 'Slot duration' %}:</strong> {{ staff_member.get_slot_duration_text }}
<i class="fas fa-info-circle" data-toggle="tooltip"
title="{{ slot_duration_help_text }}"></i>
</p>
<p><strong>{% trans 'General start time' %}:</strong> {{ staff_member.get_lead_time }}</p>
<p><strong>{% trans 'General end time' %}:</strong> {{ staff_member.get_finish_time }}</p>
<p>
<strong>{% trans 'Weekend days you work' %}:</strong> {{ staff_member.get_weekend_days_worked_text }}
</p>
<p>
<strong>{% trans 'Appointment buffer time' %}:</strong> {{ staff_member.get_appointment_buffer_time_text }}
<i class="fas fa-info-circle" data-toggle="tooltip" title="{{ buffer_time_help_text }}"></i>
</p>
<p>
<strong>{% trans 'Appointment buffer time' %}:</strong> {{ staff_member.get_appointment_buffer_time_text }}
<i class="fas fa-info-circle" data-toggle="tooltip" title="{{ buffer_time_help_text }}"></i>
</p>
</div>
<a href="{% url 'appointment:update_staff_other_info' staff_member.user.id %}"
class="btn btn-sm section-content-button modify-btn button-color-blue btn-phoenix-primary">
<i class="fas fa-pen"></i>
</a>
{% else %}
<div class="section-content">
<p>{% trans 'No staff member information yet for this user' %}.</p>
</div>
<a href="{% url 'appointment:update_staff_other_info' user.id %}"
class="btn btn-sm section-content-button modify-btn button-color-green btn-phoenix-success">
<i class="fas fa-add"></i>
</a>
{% endif %}
</div>
</div>
<!-- Days Off Information Section -->
<section class="profile">
<div class="container">
<h3>{% trans 'Days Off' %}</h3>
<a href="{% url 'appointment:add_day_off' staff_user_id=user.id %}"
</div>
<a href="{% url 'appointment:update_staff_other_info' staff_member.user.id %}"
class="btn btn-sm section-content-button modify-btn button-color-blue btn-phoenix-primary">
<i class="fas fa-pen"></i>
</a>
{% else %}
<div class="section-content">
<p>{% trans 'No staff member information yet for this user' %}.</p>
</div>
<a href="{% url 'appointment:update_staff_other_info' user.id %}"
class="btn btn-sm section-content-button modify-btn button-color-green btn-phoenix-success">
<i class="fas fa-add"></i>
</a>
<small>
{% trans "Days off are days you're not working, you need to set them for holidays as well so clients don't book you those days." %}
</small>
<div class="table-responsive">
<table class="table table-sm fs-9 mb-1">
<thead>
{% endif %}
</div>
</div>
<!-- Days Off Information Section -->
<section class="profile">
<div class="container">
<h3>{% trans 'Days Off' %}</h3>
<a href="{% url 'appointment:add_day_off' staff_user_id=user.id %}"
class="btn btn-sm section-content-button modify-btn button-color-green btn-phoenix-success">
<i class="fas fa-add"></i>
</a>
<small>
{% trans "Days off are days you're not working, you need to set them for holidays as well so clients don't book you those days." %}
</small>
<div class="table-responsive">
<table class="table table-sm fs-9 mb-1">
<thead>
<tr>
<th>{% trans 'Start date' %}</th>
<th>{% trans 'End date' %}</th>
<th>{% trans 'Description' %}</th>
<th>{% trans 'Action' %}</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
{% for day_off in days_off %}
<tr>
<td>{{ day_off.start_date }}</td>
@ -135,52 +135,52 @@
<td colspan="4">{% trans 'No days off have been set' %}.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</section>
</div>
</section>
<!-- Working Hours Information Section -->
<section class="profile">
<div class="container">
<h3>{% trans 'Working Hours' %}</h3>
<a href="{% url 'appointment:add_working_hours_id' user.id %}"
class="section-content-button modify-btn button-color-green btn btn-sm btn-phoenix-success">
<i class="fas fa-add"></i>
</a>
<small>
{% trans "Note: If you are a staff member, your working hours will be used to determine when you are available for appointments." %}
</small>
<div class="table-responsive">
<table class="table table-sm fs-9 mb-1">
<thead>
<section class="profile">
<div class="container">
<h3>{% trans 'Working Hours' %}</h3>
<a href="{% url 'appointment:add_working_hours_id' user.id %}"
class="section-content-button modify-btn button-color-green btn btn-sm btn-phoenix-success">
<i class="fas fa-add"></i>
</a>
<small>
{% trans "Note: If you are a staff member, your working hours will be used to determine when you are available for appointments." %}
</small>
<div class="table-responsive">
<table class="table table-sm fs-9 mb-1">
<thead>
<tr>
<th>{% trans 'Day' %}</th>
<th>{% trans 'Start time' %}</th>
<th>{% trans 'End time' %}</th>
<th>{% trans 'Action' %}</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
{% for working_hour in working_hours %}
<tr>
{% if working_hour.day_of_week == 0 %}
<td>{{ _("Sunday") }}</td>
{% elif working_hour.day_of_week == 1 %}
<td>{{ _("Monday") }}</td>
{% elif working_hour.day_of_week == 2 %}
<td>{{ _("Tuesday") }}</td>
{% elif working_hour.day_of_week == 3 %}
<td>{{ _("Wednesday") }}</td>
{% elif working_hour.day_of_week == 4 %}
<td>{{ _("Thursday") }}</td>
{% elif working_hour.day_of_week == 5 %}
<td>{{ _("Friday") }}</td>
{% elif working_hour.day_of_week == 6 %}
<td>{{ _("Saturday") }}</td>
{% endif %}
{% if working_hour.day_of_week == 0 %}
<td>{{ _("Sunday") }}</td>
{% elif working_hour.day_of_week == 1 %}
<td>{{ _("Monday") }}</td>
{% elif working_hour.day_of_week == 2 %}
<td>{{ _("Tuesday") }}</td>
{% elif working_hour.day_of_week == 3 %}
<td>{{ _("Wednesday") }}</td>
{% elif working_hour.day_of_week == 4 %}
<td>{{ _("Thursday") }}</td>
{% elif working_hour.day_of_week == 5 %}
<td>{{ _("Friday") }}</td>
{% elif working_hour.day_of_week == 6 %}
<td>{{ _("Saturday") }}</td>
{% endif %}
<td>{{ working_hour.start_time|time:"g:i A" }}</td>
<td>{{ working_hour.end_time|time:"g:i A" }}</td>
@ -219,25 +219,25 @@
<td colspan="4">{% trans 'No working hours have been set' %}.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</section>
</div>
</section>
<!-- Service Information Section -->
<section class="profile">
<div class="container">
<h3>{% trans 'Service Offered' %}</h3>
<small>
{% if not superuser %}
{% trans "To add/modify a new service, make a request to an admin." %}
{% trans "Changes made in one service will change it for every staff member." %}
{% endif %}
</small>
<div class="table-responsive">
<table class="table table-sm fs-9 mb-0">
<thead>
<section class="profile">
<div class="container">
<h3>{% trans 'Service Offered' %}</h3>
<small>
{% if not superuser %}
{% trans "To add/modify a new service, make a request to an admin." %}
{% trans "Changes made in one service will change it for every staff member." %}
{% endif %}
</small>
<div class="table-responsive">
<table class="table table-sm fs-9 mb-0">
<thead>
<tr>
<th>{% trans 'Name' %}</th>
<th>{% trans 'Description' %}</th>
@ -245,8 +245,8 @@
<th>{% trans 'Price' %}</th>
<th>{% trans 'Down payment' %}</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
{% for service in services_offered %}
<tr>
<td>{{ service.name }}</td>
@ -260,14 +260,14 @@
<td colspan="5">{% trans 'No service offered yet' %}.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</section>
</div>
</section>
{% include 'modal/confirm_modal.html' %}
{% include 'modal/confirm_modal.html' %}
{% endblock %}
{% block customJS %}
<!-- Bootstrap's JS and CSS (if not already included) -->

146
templates/appointment/appointments.html
View File

@ -13,89 +13,89 @@
{% endblock %}
{% block body %}
<div class="row">
<div class="col-xl-12">
<h3 class="page-title">
{% if page_header %}{{ page_header }}{% else %}{{ service.name }}{% endif %} </h3>
<small class="page-description">
{% trans "Check out our availability and book the date and time that works for you" %}
</small>
<div class="row">
<div class="col-xl-12">
<h3 class="page-title">
{% if page_header %}{{ page_header }}{% else %}{{ service.name }}{% endif %} </h3>
<small class="page-description">
{% trans "Check out our availability and book the date and time that works for you" %}
</small>
<hr>
<hr>
<div class="djangoAppt_page-body">
<div class="djangoAppt_appointment-calendar">
<div class="djangoAppt_appointment-calendar-title-timezone">
<div class="djangoAppt_title">
{% trans "Select a date and time" %}
</div>
<div class="djangoAppt_timezone-details">
{% trans "Timezone" %}:&nbsp;{{ timezoneTxt }}
</div>
<div class="djangoAppt_page-body">
<div class="djangoAppt_appointment-calendar">
<div class="djangoAppt_appointment-calendar-title-timezone">
<div class="djangoAppt_title">
{% trans "Select a date and time" %}
</div>
<hr class="djangoAppt_second-part">
<div class="djangoAppt_calendar-and-slot">
<div class="djangoAppt_calendar" id="calendar">
</div>
<div class="djangoAppt_slot">
<div class="djangoAppt_date_chosen">{{ date_chosen }}</div>
<div class="slot-container">
<div class="error-message"></div>
<ul id="slot-list" class="djangoAppt_slot-list">
<div class="djangoAppt_timezone-details">
{% trans "Timezone" %}:&nbsp;{{ timezoneTxt }}
</div>
</div>
<hr class="djangoAppt_second-part">
<div class="djangoAppt_calendar-and-slot">
<div class="djangoAppt_calendar" id="calendar">
</div>
<div class="djangoAppt_slot">
<div class="djangoAppt_date_chosen">{{ date_chosen }}</div>
<div class="slot-container">
<div class="error-message"></div>
<ul id="slot-list" class="djangoAppt_slot-list">
<!-- Slot list will be updated dynamically by the AJAX request -->
</ul>
</div>
</ul>
</div>
</div>
{% if rescheduled_date %}
<div class="form-group" style="margin-top: 10px">
<label for="reason_for_rescheduling">{% trans "Reason for rescheduling" %}:</label>
<textarea name="reason_for_rescheduling" id="reason_for_rescheduling"
class="form-control" rows="1" required></textarea>
</div>
{% endif %}
</div>
<div class="djangoAppt_service-description">
<form method="post" action="{% url 'appointment:appointment_request_submit' %}"
class="appointment-form">
{% csrf_token %}
<div class="staff-members-list">
<label class="djangoAppt_item-name" for="staff_id">{{ label }}</label>
<select name="staff_member" id="staff_id">
{% if not staff_member %}
<option value="none"
selected>{% trans 'Please select a staff member' %}</option>
{% endif %}
{% for sf in all_staff_members %}
<option value="{{ sf.id }}"
{% if staff_member and staff_member.id == sf.id %}selected{% endif %}>{{ sf.get_staff_member_name }}</option>
{% endfor %}
</select>
</div>
<div>{% trans "Service Details" %}</div>
<hr class="djangoAppt_second-part">
<div class="djangoAppt_service-description-content">
<p class="djangoAppt_item-name">{{ service.name }}</p>
<p id="service-datetime-chosen" class="service-datetime-chosen">{{ date_chosen }}</p>
<p>{{ service.get_duration }}</p>
<p>{{ service.get_price_text }}</p>
<button type="submit"
class="btn btn-phoenix-primary btn-submit-appointment"
disabled>{% trans 'Next' %}</button>
</div>
</form>
</div>
{% if rescheduled_date %}
<div class="form-group" style="margin-top: 10px">
<label for="reason_for_rescheduling">{% trans "Reason for rescheduling" %}:</label>
<textarea name="reason_for_rescheduling" id="reason_for_rescheduling"
class="form-control" rows="1" required></textarea>
</div>
{% endif %}
</div>
<div class="djangoAppt_service-description">
<form method="post" action="{% url 'appointment:appointment_request_submit' %}"
class="appointment-form">
{% csrf_token %}
<div class="staff-members-list">
<label class="djangoAppt_item-name" for="staff_id">{{ label }}</label>
<select name="staff_member" id="staff_id">
{% if not staff_member %}
<option value="none"
selected>{% trans 'Please select a staff member' %}</option>
{% endif %}
{% for sf in all_staff_members %}
<option value="{{ sf.id }}"
{% if staff_member and staff_member.id == sf.id %}selected{% endif %}>{{ sf.get_staff_member_name }}</option>
{% endfor %}
</select>
</div>
<div>{% trans "Service Details" %}</div>
<hr class="djangoAppt_second-part">
<div class="djangoAppt_service-description-content">
<p class="djangoAppt_item-name">{{ service.name }}</p>
<p id="service-datetime-chosen" class="service-datetime-chosen">{{ date_chosen }}</p>
<p>{{ service.get_duration }}</p>
<p>{{ service.get_price_text }}</p>
<button type="submit"
class="btn btn-phoenix-primary btn-submit-appointment"
disabled>{% trans 'Next' %}</button>
</div>
</form>
</div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
</div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
</div>
</div>
{% endblock %}

26
templates/appointment/set_password.html
View File

@ -82,22 +82,22 @@
{% endblock %}
{% block body %}
<div class="container">
<h2>{% trans 'Reset Your Password' %}</h2>
<h2>{% trans 'Reset Your Password' %}</h2>
<!-- Display messages -->
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<!-- Password Reset Form -->
<form method="post">
{% csrf_token %}
{{ form.as_p }} <!-- Renders the form fields -->
<button type="submit">{% trans 'Reset Password' %}</button>
</form>
<form method="post">
{% csrf_token %}
{{ form.as_p }} <!-- Renders the form fields -->
<button type="submit">{% trans 'Reset Password' %}</button>
</form>
{% endblock %}
{% block customJS %}
<script src="{% static 'js/js-utils.js' %}"></script>

118
templates/auth_base.html
View File

@ -7,27 +7,27 @@
data-navigation-type="default"
data-navbar-horizontal-shape="default">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
<title>{% block title %}{% trans 'HAIKAL' %}{% endblock %}</title>
<title>{% block title %}{% trans 'HAIKAL' %}{% endblock %}</title>
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
<link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
<meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
<link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
<meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
<meta name="theme-color" content="#ffffff">
<script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
<script src="{% static 'js/config.js' %}"></script>
<script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
<script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
<script src="{% static 'js/config.js' %}"></script>
<script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
@ -36,71 +36,71 @@
<!-- ===============================================-->
<link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
<link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&amp;display=swap" rel="stylesheet">
<link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet">
<link href="{% static 'css/sweetalert2.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
{% if LANGUAGE_CODE == 'en' %}
<link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
<link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
{% else %}
<link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
<link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
{% endif %}
<link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
<link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&amp;display=swap" rel="stylesheet">
<link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet">
<link href="{% static 'css/sweetalert2.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
{% if LANGUAGE_CODE == 'en' %}
<link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
<link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
{% else %}
<link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
<link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
{% endif %}
</head>
</head>
<body>
{% include 'messages.html' %}
<main class="main" id="top">
<body>
{% include 'messages.html' %}
<main class="main" id="top">
<div class="content">
<div class="content">
{% block content %}
{% block content %}
<!-- Main content goes here -->
{% endblock %}
{% endblock %}
</div>
</div>
</main>
</main>
<!-- ===============================================-->
<!-- End of Main Content-->
<!-- ===============================================-->
<script>
<script>
</script>
{% block customJS %}{% endblock customJS %}
</script>
{% block customJS %}{% endblock customJS %}
<!-- ===============================================-->
<!-- JavaScripts-->
<!-- ===============================================-->
<script src="{% static 'vendors/popper/popper.min.js' %}"></script>
<script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
<script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>
<script src="{% static 'vendors/is/is.min.js' %}"></script>
<script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
<script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
<script src="{% static 'vendors/list.js/list.min.js' %}"></script>
<script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
<script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
<script src="{% static 'js/phoenix.js' %}"></script>
<script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
<script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
<script src="{% static 'vendors/mapbox-gl/mapbox-gl.js' %}"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
</body>
<script src="{% static 'vendors/popper/popper.min.js' %}"></script>
<script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
<script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>
<script src="{% static 'vendors/is/is.min.js' %}"></script>
<script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
<script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
<script src="{% static 'vendors/list.js/list.min.js' %}"></script>
<script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
<script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
<script src="{% static 'js/phoenix.js' %}"></script>
<script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
<script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
<script src="{% static 'vendors/mapbox-gl/mapbox-gl.js' %}"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
</body>
</html>

200
templates/base.html
View File

@ -6,50 +6,50 @@
data-bs-theme=""
data-navigation-type="default"
data-navbar-horizontal-shape="default">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
<title>
{% block title %}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
<title>
{% block title %}
{% endblock %}
{% block description %}
{% endblock %}
</title>
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
<link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
<meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
<meta name="theme-color" content="#ffffff">
{% endblock %}
{% block description %}
{% endblock %}
</title>
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
<link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
<meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
<meta name="theme-color" content="#ffffff">
<script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
<script src="{% static 'js/config.js' %}"></script>
<script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
<link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
<link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&amp;display=swap" rel="stylesheet">
<link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet">
<script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
<script src="{% static 'js/config.js' %}"></script>
<script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
<link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
<link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&amp;display=swap" rel="stylesheet">
<link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet">
<link href="{% static 'vendors/flatpickr/flatpickr.min.css' %}" rel="stylesheet">
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
{% if LANGUAGE_CODE == 'ar' %}
<link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
<link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
{% else %}
<link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
<link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
{% endif %}
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/echarts.js' %}"></script>
<link href="{% static 'vendors/flatpickr/flatpickr.min.css' %}" rel="stylesheet">
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
{% if LANGUAGE_CODE == 'ar' %}
<link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
<link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
{% else %}
<link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
<link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
{% endif %}
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/echarts.js' %}"></script>
<!--<style>
.btn{
@ -59,78 +59,78 @@
padding-bottom: 4px;
}
</style>-->
{% block customCSS %}
{% block customCSS %}
{% endblock %}
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
{% endblock %}
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
{% include "toast-alert.html" %}
<main class="main" id="top">
{% include 'header.html' %}
{% include "toast-alert.html" %}
<main class="main" id="top">
{% include 'header.html' %}
<div class="content">
{% include "plans/expiration_messages.html" %}
{% block period_navigation %}
<div class="content">
{% include "plans/expiration_messages.html" %}
{% block period_navigation %}
{% endblock period_navigation %}
{% endblock period_navigation %}
{% block content %}
{% endblock content%}
{% block body %}
{% endblock body%}
{% block content %}
{% endblock content%}
{% block body %}
{% endblock body%}
<div class="my-3"></div>
{% include 'footer.html' %}
</div>
</main>
<script src="{% static 'js/djetler.bundle.js' %}"></script>
<script src="{% static 'js/js-utils.js' %}"></script>
<script src="{% static 'js/modal/show_modal.js' %}"></script>
<div class="my-3"></div>
{% include 'footer.html' %}
</div>
</main>
<script src="{% static 'js/djetler.bundle.js' %}"></script>
<script src="{% static 'js/js-utils.js' %}"></script>
<script src="{% static 'js/modal/show_modal.js' %}"></script>
<!-- ===============================================-->
<!-- JavaScripts-->
<!-- ===============================================-->
<script src="{% static 'vendors/popper/popper.min.js' %}"></script>
<script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
<script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>
<script src="{% static 'vendors/is/is.min.js' %}"></script>
<script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
<script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
<script src="{% static 'vendors/list.js/list.min.js' %}"></script>
<script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
<script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
<script src="{% static 'js/phoenix.js' %}"></script>
<script src="{% static 'js/apexcharts.js' %}"></script>
<script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
<script src="{% static 'js/crm-analytics.js' %}"></script>
<script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
<script src="{% static 'js/crm-dashboard.js' %}"></script>
<script src="{% static 'js/projectmanagement-dashboard.js' %}"></script>
<script src="{% static 'vendors/popper/popper.min.js' %}"></script>
<script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
<script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>
<script src="{% static 'vendors/is/is.min.js' %}"></script>
<script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
<script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
<script src="{% static 'vendors/list.js/list.min.js' %}"></script>
<script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
<script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
<script src="{% static 'js/phoenix.js' %}"></script>
<script src="{% static 'js/apexcharts.js' %}"></script>
<script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
<script src="{% static 'js/crm-analytics.js' %}"></script>
<script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
<script src="{% static 'js/crm-dashboard.js' %}"></script>
<script src="{% static 'js/projectmanagement-dashboard.js' %}"></script>
<script src="{% static 'vendors/mapbox-gl/mapbox-gl.js' %}"></script>
<script src="{% static 'vendors/turf.min.js' %}"></script>
<script src="{% static 'vendors/htmx.min.js' %}"></script>
<script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
<script src="{% static 'vendors/flatpickr/flatpickr.min.js' %}"></script>
<script src="{% static 'vendors/mapbox-gl/mapbox-gl.js' %}"></script>
<script src="{% static 'vendors/turf.min.js' %}"></script>
<script src="{% static 'vendors/htmx.min.js' %}"></script>
<script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
<script src="{% static 'vendors/flatpickr/flatpickr.min.js' %}"></script>
<script>
{% if entity_slug %}
let entitySlug = "{{ view.kwargs.entity_slug }}"
{% endif %}
<script>
{% if entity_slug %}
let entitySlug = "{{ view.kwargs.entity_slug }}"
{% endif %}
{% if from_date and to_date %}
let fromDate = "{{ from_date | date:'Y-m-d' }}";
let toDate = "{{ to_date | date:'Y-m-d' }}";
{% endif %}
{% if from_date and to_date %}
let fromDate = "{{ from_date | date:'Y-m-d' }}";
let toDate = "{{ to_date | date:'Y-m-d' }}";
{% endif %}
{% if date_navigation_url %}
let dateNavigationUrl = "{{ date_navigation_url }}"
let datePickers = document.querySelectorAll("[id^='djl-datepicker']")
datePickers.forEach(dp => djLedger.getCalendar(dp.attributes.id.value, dateNavigationUrl))
{% endif %}
</script>
{% block customJS %}
{% endblock %}
</body>
{% if date_navigation_url %}
let dateNavigationUrl = "{{ date_navigation_url }}"
let datePickers = document.querySelectorAll("[id^='djl-datepicker']")
datePickers.forEach(dp => djLedger.getCalendar(dp.attributes.id.value, dateNavigationUrl))
{% endif %}
</script>
{% block customJS %}
{% endblock %}
</body>
</html>

80
templates/chat_support.html
View File

@ -1,43 +1,43 @@
<div class="support-chat-row">
<div class="row-fluid support-chat">
<div class="card bg-body-emphasis">
<div class="card-header d-flex flex-between-center px-4 py-3 border-bottom border-translucent">
<h5 class="mb-0 d-flex align-items-center gap-2">Demo widget<span class="fa-solid fa-circle text-success fs-11"></span></h5>
<div class="btn-reveal-trigger">
<button class="btn btn-link p-0 dropdown-toggle dropdown-caret-none transition-none d-flex" type="button" id="support-chat-dropdown" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h text-body"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2" aria-labelledby="support-chat-dropdown"><a class="dropdown-item" href="#!">Request a callback</a><a class="dropdown-item" href="#!">Search in chat</a><a class="dropdown-item" href="#!">Show history</a><a class="dropdown-item" href="#!">Report to Admin</a><a class="dropdown-item btn-support-chat" href="#!">Close Support</a></div>
</div>
</div>
<div class="card-body chat p-0">
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a>
</div>
<div class="text-center mt-auto">
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="{% static 'images/team/40x40/30.webp' %}" alt="" /></div>
<h5 class="mt-2 mb-3">Eric</h5>
<p class="text-center text-body-emphasis mb-0">Ask us anything – we’ll get back to you here or by email within 24 hours.</p>
</div>
</div>
</div>
<div class="card-footer d-flex align-items-center gap-2 border-top border-translucent ps-3 pe-4 py-3">
<div class="d-flex align-items-center flex-1 gap-3 border border-translucent rounded-pill px-4">
<input class="form-control outline-none border-0 flex-1 fs-9 px-0" type="text" placeholder="Write message" />
<label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatPhotos"><span class="fa-solid fa-image"></span></label>
<input class="d-none" type="file" accept="image/*" id="supportChatPhotos" />
<label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatAttachment"> <span class="fa-solid fa-paperclip"></span></label>
<input class="d-none" type="file" id="supportChatAttachment" />
</div>
<button class="btn p-0 border-0 send-btn"><span class="fa-solid fa-paper-plane fs-9"></span></button>
</div>
<div class="row-fluid support-chat">
<div class="card bg-body-emphasis">
<div class="card-header d-flex flex-between-center px-4 py-3 border-bottom border-translucent">
<h5 class="mb-0 d-flex align-items-center gap-2">Demo widget<span class="fa-solid fa-circle text-success fs-11"></span></h5>
<div class="btn-reveal-trigger">
<button class="btn btn-link p-0 dropdown-toggle dropdown-caret-none transition-none d-flex" type="button" id="support-chat-dropdown" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h text-body"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2" aria-labelledby="support-chat-dropdown"><a class="dropdown-item" href="#!">Request a callback</a><a class="dropdown-item" href="#!">Search in chat</a><a class="dropdown-item" href="#!">Show history</a><a class="dropdown-item" href="#!">Report to Admin</a><a class="dropdown-item btn-support-chat" href="#!">Close Support</a></div>
</div>
</div>
<div class="card-body chat p-0">
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a>
</div>
<div class="text-center mt-auto">
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="{% static 'images/team/40x40/30.webp' %}" alt="" /></div>
<h5 class="mt-2 mb-3">Eric</h5>
<p class="text-center text-body-emphasis mb-0">Ask us anything – we’ll get back to you here or by email within 24 hours.</p>
</div>
</div>
<button class="btn btn-support-chat p-0 border border-translucent"><span class="fs-8 btn-text text-primary text-nowrap">Chat demo</span><span class="ping-icon-wrapper mt-n4 ms-n6 mt-sm-0 ms-sm-2 position-absolute position-sm-relative"><span class="ping-icon-bg"></span><span class="fa-solid fa-circle ping-icon"></span></span><span class="fa-solid fa-headset text-primary fs-8 d-sm-none"></span><span class="fa-solid fa-chevron-down text-primary fs-7"></span></button>
</div>
</div>
<div class="card-footer d-flex align-items-center gap-2 border-top border-translucent ps-3 pe-4 py-3">
<div class="d-flex align-items-center flex-1 gap-3 border border-translucent rounded-pill px-4">
<input class="form-control outline-none border-0 flex-1 fs-9 px-0" type="text" placeholder="Write message" />
<label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatPhotos"><span class="fa-solid fa-image"></span></label>
<input class="d-none" type="file" accept="image/*" id="supportChatPhotos" />
<label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatAttachment"> <span class="fa-solid fa-paperclip"></span></label>
<input class="d-none" type="file" id="supportChatAttachment" />
</div>
<button class="btn p-0 border-0 send-btn"><span class="fa-solid fa-paper-plane fs-9"></span></button>
</div>
</div>
</div>
<button class="btn btn-support-chat p-0 border border-translucent"><span class="fs-8 btn-text text-primary text-nowrap">Chat demo</span><span class="ping-icon-wrapper mt-n4 ms-n6 mt-sm-0 ms-sm-2 position-absolute position-sm-relative"><span class="ping-icon-bg"></span><span class="fa-solid fa-circle ping-icon"></span></span><span class="fa-solid fa-headset text-primary fs-8 d-sm-none"></span><span class="fa-solid fa-chevron-down text-primary fs-7"></span></button>
</div>

30
templates/components/activity_modal.html Normal file
View File

@ -0,0 +1,30 @@
{% load static i18n crispy_forms_tags %}
<!-- activity Modal -->
<div class="modal fade" id="activityModal" tabindex="-1" aria-labelledby="activityModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
<h4 class="modal-title" id="noteModalLabel">{% trans 'Activity' %}</h4>
<button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
<span class="fas fa-times"></span>
</button>
</div>
<div class="modal-body">
<form action="{% url 'add_activity' content_type=content_type pk=pk %}" method="post" class="add_activity_form">
{% csrf_token %}
<div class="mb-2 form-group">
<select class="form-select" name="activity_type" id="activity_type">
<option value="call">{% trans 'Call' %}</option>
<option value="email">{% trans 'Email' %}</option>
<option value="meeting">{% trans 'Meeting' %}</option>
</select>
</div>
<div class="mb-3 form-group">
<textarea class="form-control" name="notes" id="notes" rows="6"></textarea>
</div>
<button type="submit" class="btn btn-success w-100">{% trans 'Save' %}</button>
</form>
</div>
</div>
</div>
</div>

12
templates/crm/add_activity.html
View File

@ -2,10 +2,10 @@
{% load i18n static crispy_forms_filters %}
{% block content %}
<h1>Add Activity to {{ lead.first_name }} {{ lead.last_name }}</h1>
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-phoenix-primary" type="submit">Add Activity</button>
</form>
<h1>Add Activity to {{ lead.first_name }} {{ lead.last_name }}</h1>
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-phoenix-primary" type="submit">Add Activity</button>
</form>
{% endblock %}

68
templates/crm/employee_calendar.html
View File

@ -1,38 +1,38 @@
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="row">
<div class="table-responsive border-translucent">
<table class="table table-sm fs-9">
<thead>
<tr>
<th>Customer</th>
<th>Service</th>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Staff</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{% for appointment in appointments %}
<tr>
<td>{{ appointment.get_client_name }}</td>
<td>{{ appointment.get_service }}</td>
<td>{{ appointment.appointment_request.date|date:"Y-m-d" }}</td>
<td>{{ appointment.appointment_request.start_time }}</td>
<td>{{ appointment.appointment_request.end_time }}</td>
<td>{{ appointment.get_staff_member_name }}</td>
<td></td>
<td>
<a href="{% url 'appointment:display_appointment' appointment.id %}">view</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="table-responsive border-translucent">
<table class="table table-sm fs-9">
<thead>
<tr>
<th>Customer</th>
<th>Service</th>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Staff</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{% for appointment in appointments %}
<tr>
<td>{{ appointment.get_client_name }}</td>
<td>{{ appointment.get_service }}</td>
<td>{{ appointment.appointment_request.date|date:"Y-m-d" }}</td>
<td>{{ appointment.appointment_request.start_time }}</td>
<td>{{ appointment.appointment_request.end_time }}</td>
<td>{{ appointment.get_staff_member_name }}</td>
<td></td>
<td>
<a href="{% url 'appointment:display_appointment' appointment.id %}">view</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %}

12
templates/crm/leads/lead_confirm_delete.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</body>
</html>

1010
templates/crm/leads/lead_detail.html
View File

File diff suppressed because it is too large Load Diff

30
templates/crm/leads/lead_form.html
View File

@ -2,21 +2,21 @@
{% load i18n static crispy_forms_filters %}
{% block content %}
<div class="container-fluid">
<h1>{% if object %}{{ _("Update") }}{% else %}{{ _("Create") }}{% endif %}</h1>
<div class="row mb-3">
<div class="col-sm-6 col-md-8">
<form class="form" method="post">
{% csrf_token %}
{{ form|crispy }}
<button type="submit" name="add_lead" id="lead-save" class="btn btn-phoenix-primary">
<i class="fa-solid fa-floppy-disk"></i> {{ _("Save") }}
</button>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-phoenix-secondary">
<i class="fa-solid fa-ban"></i> {{ _("Cancel") }}
</a>
</form>
<div class="container-fluid">
<h1>{% if object %}{{ _("Update") }}{% else %}{{ _("Create") }}{% endif %}</h1>
<div class="row mb-3">
<div class="col-sm-6 col-md-8">
<form class="form" method="post">
{% csrf_token %}
{{ form|crispy }}
<button type="submit" name="add_lead" id="lead-save" class="btn btn-phoenix-primary">
<i class="fa-solid fa-floppy-disk"></i> {{ _("Save") }}
</button>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-phoenix-secondary">
<i class="fa-solid fa-ban"></i> {{ _("Cancel") }}
</a>
</form>
</div>
</div>
</div>
</div>
{% endblock %}

847
templates/crm/leads/lead_list.html
View File

@ -1,266 +1,233 @@
{% extends 'base.html' %}
{% load i18n static %}
{% load i18n static humanize %}
{% block title %}{{ _('Leads')|capfirst }}{% endblock title %}
{% block content %}
<div class="row g-3">
<h2 class="mb-4">{{ _("Leads")|capfirst }}</h2>
<!-- Action Tracking Modal -->
<div class="modal fade" id="actionTrackingModal" tabindex="-1" aria-labelledby="actionTrackingModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="actionTrackingModalLabel">{{ _("Update Lead Actions") }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="actionTrackingForm" method="post">
<div class="modal-body">
{% csrf_token %}
<input type="hidden" id="leadId" name="lead_id">
<div class="mb-3">
<label for="currentAction" class="form-label">{{ _("Current Action") }}</label>
<select class="form-select" id="currentAction" name="current_action" required>
<option value="">{{ _("Select Action") }}</option>
<option value="contacted">{{ _("Contacted") }}</option>
<option value="follow_up">{{ _("Follow Up") }}</option>
<option value="proposal_sent">{{ _("Proposal Sent") }}</option>
<option value="negotiation">{{ _("Negotiation") }}</option>
<option value="closed">{{ _("Closed") }}</option>
</select>
</div>
<div class="mb-3">
<label for="nextAction" class="form-label">{{ _("Next Action") }}</label>
<select class="form-select" id="nextAction" name="next_action" required>
<option value="">{{ _("Select Next Action") }}</option>
<option value="call">{{ _("Call") }}</option>
<option value="meeting">{{ _("Meeting") }}</option>
<option value="email">{{ _("Email") }}</option>
<option value="proposal">{{ _("Send Proposal") }}</option>
<option value="follow_up">{{ _("Follow Up") }}</option>
</select>
</div>
<div class="mb-3">
<label for="nextActionDate" class="form-label">{{ _("Next Action Date") }}</label>
<input type="datetime-local" class="form-control" id="nextActionDate" name="next_action_date" required>
</div>
<div class="mb-3">
<label for="actionNotes" class="form-label">{{ _("Notes") }}</label>
<textarea class="form-control" id="actionNotes" name="action_notes" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
<button type="submit" class="btn btn-primary">{{ _("Save Changes") }}</button>
</div>
</form>
</div>
</div>
</div>
<div class="row g-3 justify-content-between mb-4">
<div class="col-auto">
<div class="d-md-flex justify-content-between">
{% if perms.inventory.add_lead %}
<div>
<a href="{% url 'lead_create' %}" class="btn btn-sm btn-phoenix-primary"><span class="fas fa-plus me-2"></span>{{ _("Add Lead") }}</a>
</div>
{% endif %}
</div>
</div>
<div class="col-auto">
<div class="d-flex">
{% include 'partials/search_box.html' %}
</div>
</div>
</div>
<div class="row g-3">
<div class="col-12">
{% if page_obj.object_list %}
<div class="table-responsive scrollbar mx-n1 px-1">
<table class="table fs-9 mb-0 border-top border-translucent">
<thead>
<tr>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 20%;">{{ _("Lead Name")|capfirst }}</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><i class="text-success-dark fas fa-car"></i></div>
<span>{{ _("Car")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><span class="text-success-dark" data-feather="mail"></span></div>
<span>{{ _("email")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="text-primary-dark" data-feather="phone"></span></div>
<div class="" dir="ltr">{{ _("Phone Number") }}</div>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="text-primary-dark" data-feather="phone"></span></div>
<span>{{ _("Schedule") }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="database"></span></div>
<span>{{ _("Current Action")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="database"></span></div>
<span>{{ _("Next Action")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="database"></span></div>
<span>{{ _("Next Action Date")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="database"></span></div>
<span>{{ _("Assigned To")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="database"></span></div>
<span>{{ _("Source")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div>
<span>{{ _("Channel")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div>
<span>{{ _("Stage")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div>
<span>{{ _("Is Opportunity")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
{{ _("Create date") }}
</th>
<th class="text-end white-space-nowrap align-middle" scope="col"></th>
</tr>
</thead>
<tbody class="list" id="lead-tables-body">
{% for lead in leads %}
<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
<h4 class="mb-0 me-2 text-danger">{{ _("Delete")}}<i class="fas fa-exclamation-circle text-danger ms-2"></i></h4>
<button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times"></span></button>
</div>
<div class="modal-body p-4">
<p>{% trans "Are you sure you want to delete this lead?" %}</p>
</div>
<div class="modal-footer flex justify-content-center border-top-0">
<a type="button" class="btn btn-sm btn-danger w-100" href="{% url 'lead_delete' lead.pk %}">
{% trans "Yes" %}
</a>
</div>
<h2 class="mb-4">{{ _("Leads")|capfirst }}</h2>
<!-- Action Tracking Modal -->
<div class="modal fade" id="actionTrackingModal" tabindex="-1" aria-labelledby="actionTrackingModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="actionTrackingModalLabel">{{ _("Update Lead Actions") }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="actionTrackingForm" method="post">
<div class="modal-body">
{% csrf_token %}
<input type="hidden" id="leadId" name="lead_id">
</div>
<div class="mb-3">
<label for="currentAction" class="form-label">{{ _("Current Action") }}</label>
<select class="form-select" id="currentAction" name="current_action" required>
<option value="">{{ _("Select Action") }}</option>
<option value="contacted">{{ _("Contacted") }}</option>
<option value="follow_up">{{ _("Follow Up") }}</option>
<option value="proposal_sent">{{ _("Proposal Sent") }}</option>
<option value="negotiation">{{ _("Negotiation") }}</option>
<option value="closed">{{ _("Closed") }}</option>
</select>
</div>
<div class="mb-3">
<label for="nextAction" class="form-label">{{ _("Next Action") }}</label>
<select class="form-select" id="nextAction" name="next_action" required>
<option value="">{{ _("Select Next Action") }}</option>
<option value="call">{{ _("Call") }}</option>
<option value="meeting">{{ _("Meeting") }}</option>
<option value="email">{{ _("Email") }}</option>
<option value="proposal">{{ _("Send Proposal") }}</option>
<option value="follow_up">{{ _("Follow Up") }}</option>
</select>
</div>
<div class="mb-3">
<label for="nextActionDate" class="form-label">{{ _("Next Action Date") }}</label>
<input type="datetime-local" class="form-control" id="nextActionDate" name="next_action_date" required>
</div>
<div class="mb-3">
<label for="actionNotes" class="form-label">{{ _("Notes") }}</label>
<textarea class="form-control" id="actionNotes" name="action_notes" rows="3"></textarea>
</div>
</div>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="name align-middle white-space-nowrap ps-0">
<div class="d-flex align-items-center">
<div><a class="fs-8 fw-bold" href="{% url 'lead_detail' lead.pk %}">{{lead.full_name}}</a>
<div class="d-flex align-items-center">
<p class="mb-0 text-body-highlight fw-semibold fs-9 me-2"></p>
{% if lead.status == "new" %}
<span class="badge badge-phoenix badge-phoenix-primary"><span class="badge-label">{{_("New")}}</span><span class="fa fa-bell ms-1"></span></span>
{% elif lead.status == "pending" %}
<span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{_("Pending")}}</span><span class="fa fa-clock-o ms-1"></span></span>
{% elif lead.status == "in_progress" %}
<span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("In Progress")}}</span><span class="fa fa-wrench ms-1"></span></span>
{% elif lead.status == "qualified" %}
<span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("Qualified")}}</span><span class="fa fa-check ms-1"></span></span>
{% elif lead.status == "contacted" %}
<span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Contacted")}}</span><span class="fa fa-times ms-1"></span></span>
{% elif lead.status == "canceled" %}
<span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{_("Canceled")}}</span><span class="fa fa-times ms-1"></span></span>
{% endif %}
</div>
</div>
</div>
</td>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
<button type="submit" class="btn btn-primary">{{ _("Save Changes") }}</button>
</div>
</form>
</div>
</div>
</div>
<td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="">{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}</a></td>
<td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="">{{ lead.email }}</a></td>
<td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="tel:{{ lead.phone_number }}">{{ lead.phone_number }}</a></td>
<td class="align-middle white-space-nowrap fw-semibold">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{lead.pk}}" aria-expanded="false" aria-controls="collapseTwo">
View Schedules ({{lead.get_latest_schedules.count}})
</button>
</h2>
<div class="accordion-collapse collapse" id="collapse{{lead.pk}}" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body pt-0">
<div class="d-flex flex-column gap-2">
<table><tbody>
{% for schedule in lead.get_latest_schedules %}
<tr class="schedule-{{ schedule.pk }}">
<td class="align-middle white-space-nowrap">
{% if schedule.scheduled_type == "call" %}
<a href="{% url 'appointment:get_user_appointments' %}">
<span class="badge badge-phoenix badge-phoenix-primary text-primary {% if schedule.schedule_past_date %}badge-phoenix-danger text-danger{% endif %} fw-semibold"><span class="text-primary {% if schedule.schedule_past_date %}text-danger{% endif %}" data-feather="phone"></span>
{{ schedule.scheduled_at }}</span></a>
{% elif schedule.scheduled_type == "meeting" %}
<a href="{% url 'appointment:get_user_appointments' %}">
<span class="badge badge-phoenix badge-phoenix-success text-success fw-semibold"><span class="text-success" data-feather="calendar"></span>
{{ schedule.scheduled_at }}</span></a>
{% elif schedule.scheduled_type == "email" %}
<a href="{% url 'appointment:get_user_appointments' %}">
<span class="badge badge-phoenix badge-phoenix-warning text-warning fw-semibold"><span class="text-warning" data-feather="email"></span>
{{ schedule.scheduled_at }}</span></a>
{% endif %}
</td>
<td>
<a style="cursor: pointer;" hx-delete="{% url 'schedule_cancel' schedule.pk %}" hx-target=".schedule-{{ schedule.pk }}" hx-confirm="Are you sure you want to cancel this schedule?"><i class="fa-solid fa-ban text-danger"></i></a>
</td>
{% endfor %}
</tr>
<tr><td><small><a href="{% url 'appointment:get_user_appointments' %}">View All ...</a></small></td></tr>
</tbody></table>
<div class="row g-3 justify-content-between mb-4">
<div class="col-auto">
<div class="d-md-flex justify-content-between">
{% if perms.inventory.add_lead %}
<div>
<a href="{% url 'lead_create' %}" class="btn btn-sm btn-phoenix-primary"><span class="fas fa-plus me-2"></span>{{ _("Add Lead") }}</a>
</div>
{% endif %}
</div>
</div>
<div class="col-auto">
<div class="d-flex">
{% include 'partials/search_box.html' %}
</div>
</div>
</div>
<div class="row g-3">
<div class="col-12">
{% if page_obj.object_list %}
<div class="table-responsive scrollbar mx-n1 px-1">
<table class="table fs-9 mb-0 border-top border-translucent">
<thead>
<tr>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 20%;">{{ _("Lead Name")|capfirst }}</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><i class="text-success-dark fas fa-car"></i></div>
<span>{{ _("Car")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><span class="text-success-dark" data-feather="mail"></span></div>
<span>{{ _("email")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="text-primary-dark" data-feather="phone"></span></div>
<div class="" dir="ltr">{{ _("Phone Number") }}</div>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="text-primary-dark" data-feather="phone"></span></div>
<span>{{ _("Schedule") }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="database"></span></div>
<span>{{ _("Action")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="database"></span></div>
<span>{{ _("Assigned To")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div>
<span>{{ _("Opportunity")|capfirst }}</span>
</div>
</th>
<th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
{{ _("Action") }}
</th>
<th class="text-end white-space-nowrap align-middle" scope="col"></th>
</tr>
</thead>
<tbody class="list" id="lead-tables-body">
{% for lead in leads %}
<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
<h4 class="mb-0 me-2 text-danger">{{ _("Delete")}}<i class="fas fa-exclamation-circle text-danger ms-2"></i></h4>
<button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times"></span></button>
</div>
<div class="modal-body p-4">
<p>{% trans "Are you sure you want to delete this lead?" %}</p>
</div>
<div class="modal-footer flex justify-content-center border-top-0">
<a type="button" class="btn btn-sm btn-danger w-100" href="{% url 'lead_delete' lead.pk %}">
{% trans "Yes" %}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">{{ lead.get_status|upper }}</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">{% if lead.next_action %}{{ lead.next_action|upper }}{% endif %}</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">{% if lead.next_action %}{{ lead.next_action_date|upper }}{% endif %}</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">{{ lead.staff|upper }}</td>
<td class="align-middle white-space-nowrap fw-semibold text-body-highlight">{{ lead.source|upper }}</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">{{ lead.channel|upper }}</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="name align-middle white-space-nowrap ps-0">
<div class="d-flex align-items-center">
<div><a class="fs-8 fw-bold" href="{% url 'lead_detail' lead.pk %}">{{lead.full_name}}</a>
<div class="d-flex align-items-center">
<p class="mb-0 text-body-highlight fw-semibold fs-9 me-2"></p>
{% if lead.status == "new" %}
<span class="badge badge-phoenix badge-phoenix-primary"><span class="badge-label">{{_("New")}}</span><span class="fa fa-bell ms-1"></span></span>
{% elif lead.status == "pending" %}
<span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{_("Pending")}}</span><span class="fa fa-clock-o ms-1"></span></span>
{% elif lead.status == "in_progress" %}
<span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("In Progress")}}</span><span class="fa fa-wrench ms-1"></span></span>
{% elif lead.status == "qualified" %}
<span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("Qualified")}}</span><span class="fa fa-check ms-1"></span></span>
{% elif lead.status == "contacted" %}
<span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Contacted")}}</span><span class="fa fa-times ms-1"></span></span>
{% elif lead.status == "canceled" %}
<span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{_("Canceled")}}</span><span class="fa fa-times ms-1"></span></span>
{% endif %}
</div>
</div>
</div>
</td>
<td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="">{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}</a></td>
<td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="">{{ lead.email }}</a></td>
<td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="tel:{{ lead.phone_number }}">{{ lead.phone_number }}</a></td>
<td class="align-middle white-space-nowrap fw-semibold">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{lead.pk}}" aria-expanded="false" aria-controls="collapseTwo">
View Schedules ({{lead.get_latest_schedules.count}})
</button>
</h2>
<div class="accordion-collapse collapse" id="collapse{{lead.pk}}" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body pt-0">
<div class="d-flex flex-column gap-2">
<table><tbody>
{% for schedule in lead.get_latest_schedules %}
<tr class="schedule-{{ schedule.pk }}">
<td class="align-middle white-space-nowrap">
{% if schedule.scheduled_type == "call" %}
<a href="{% url 'appointment:get_user_appointments' %}">
<span class="badge badge-phoenix badge-phoenix-primary text-primary {% if schedule.schedule_past_date %}badge-phoenix-danger text-danger{% endif %} fw-semibold"><span class="text-primary {% if schedule.schedule_past_date %}text-danger{% endif %}" data-feather="phone"></span>
{{ schedule.scheduled_at|naturalday|capfirst }}</span></a>
{% elif schedule.scheduled_type == "meeting" %}
<a href="{% url 'appointment:get_user_appointments' %}">
<span class="badge badge-phoenix badge-phoenix-success text-success fw-semibold"><span class="text-success" data-feather="calendar"></span>
{{ schedule.scheduled_at|naturalday|capfirst }}</span></a>
{% elif schedule.scheduled_type == "email" %}
<a href="{% url 'appointment:get_user_appointments' %}">
<span class="badge badge-phoenix badge-phoenix-warning text-warning fw-semibold"><span class="text-warning" data-feather="email"></span>
{{ schedule.scheduled_at|naturalday|capfirst }}</span></a>
{% endif %}
</td>
<td>
<a style="cursor: pointer;" hx-delete="{% url 'schedule_cancel' schedule.pk %}" hx-target=".schedule-{{ schedule.pk }}" hx-confirm="Are you sure you want to cancel this schedule?"><i class="fa-solid fa-ban text-danger"></i></a>
</td>
{% endfor %}
</tr>
<tr><td><small><a href="{% url 'appointment:get_user_appointments' %}">View All ...</a></small></td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">{{ lead.get_status|upper }}</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">{{ lead.staff|upper }}</td>
{% comment %} <td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
{% if lead.opportunity.stage == "prospect" %}
<span class="badge text-bg-primary">{{ lead.opportunity.stage|upper }}</span>
{% elif lead.opportunity.stage == "proposal" %}
@ -272,226 +239,224 @@
{% elif lead.opportunity.stage == "closed_lost" %}
<span class="badge text-bg-danger">{{ lead.opportunity.stage|upper }}</span>
{% endif %}
</td>
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
{% if lead.opportunity %}
<a href="{% url 'opportunity_detail' lead.opportunity.id %}">
<span class="badge badge-phoenix badge-phoenix-success">View Details <i class="fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
{% else %}
<span class="badge badge-phoenix badge-phoenix-danger">{{ _("No") }}</span>
{% endif %}
</td>
<td class="align-middle white-space-nowrap text-end">
{% if user == lead.staff.user or request.is_dealer %}
<div class="btn-reveal-trigger position-static">
<button
class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
type="button"
data-bs-toggle="dropdown"
data-boundary="window"
aria-haspopup="true"
aria-expanded="false"
data-bs-reference="parent">
<span class="fas fa-ellipsis-h fs-10"></span>
</button>
<div class="dropdown-menu dropdown-menu-end py-2">
{% if perms.inventory.change_lead %}
<a href="{% url 'lead_update' lead.id %}" class="dropdown-item text-success-dark">{% trans "Edit" %}</a>
{% endif %}
<button class="dropdown-item text-primary" onclick="openActionModal('{{ lead.id }}', '{{ lead.action }}', '{{ lead.next_action }}', '{{ lead.next_action_date|date:"Y-m-d\TH:i" }}')">
{% trans "Update Actions" %}
</button>
<a href="{% url 'send_lead_email' lead.id %}" class="dropdown-item text-success-dark">{% trans "Send Email" %}</a>
<a href="{% url 'schedule_lead' lead.id %}" class="dropdown-item text-success-dark">{% trans "Schedule Event" %}</a>
{% if not lead.opportunity %}
<a href="{% url 'lead_convert' lead.id %}" class="dropdown-item text-success-dark">{% trans "Convert" %}</a>
{% endif %}
<div class="dropdown-divider"></div>
{% if perms.inventory.delete_lead %}
<button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans "Delete" %}</button>
{% endif %}
</div>
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
</td> {% endcomment %}
<td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
{% if lead.opportunity %}
<a href="{% url 'opportunity_detail' lead.opportunity.id %}">
<span class="badge badge-phoenix badge-phoenix-success">Opportunity {{ lead.opportunity.lead}} <i class="fa-solid fa-arrow-up-right-from-square"></i></span>
</a>
{% endif %}
</td>
<td class="align-middle white-space-nowrap text-end">
{% if user == lead.staff.user or request.is_dealer %}
<div class="btn-reveal-trigger position-static">
<button
class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
type="button"
data-bs-toggle="dropdown"
data-boundary="window"
aria-haspopup="true"
aria-expanded="false"
data-bs-reference="parent">
<span class="fas fa-ellipsis-h fs-10"></span>
</button>
<div class="dropdown-menu dropdown-menu-end py-2">
{% if perms.inventory.change_lead %}
<a href="{% url 'lead_update' lead.id %}" class="dropdown-item text-success-dark">{% trans "Edit" %}</a>
{% endif %}
<button class="dropdown-item text-primary" onclick="openActionModal('{{ lead.id }}', '{{ lead.action }}', '{{ lead.next_action }}', '{{ lead.next_action_date|date:"Y-m-d\TH:i" }}')">
{% trans "Update Actions" %}
</button>
<a href="{% url 'send_lead_email' lead.id %}" class="dropdown-item text-success-dark">{% trans "Send Email" %}</a>
<a href="{% url 'schedule_lead' lead.id %}" class="dropdown-item text-success-dark">{% trans "Schedule Event" %}</a>
{% if not lead.opportunity %}
<a href="{% url 'lead_convert' lead.id %}" class="dropdown-item text-success-dark">{% trans "Convert" %}</a>
{% endif %}
<div class="dropdown-divider"></div>
{% if perms.inventory.delete_lead %}
<button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans "Delete" %}</button>
{% endif %}
</div>
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
</div>
<div class="row align-items-center justify-content-end py-4 pe-0 fs-9">
<div class="col-auto">
</div>
<div class="row align-items-center justify-content-end py-4 pe-0 fs-9">
<div class="col-auto">
<!-- Optional: Pagination -->
{% if is_paginated %}
{% if is_paginated %}
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm justify-content-center">
{% if page_obj.has_previous %}
<li class="page-item py-0">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item py-0">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
{% endif %} {% for num in page_obj.paginator.page_range %} {% if page_obj.number == num %}
<li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
<li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
{% else %}
<li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
<li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
{% endif %} {% endfor %} {% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}
{% block customJS %}
<script>
<script>
// Initialize SweetAlert Toast for general messages
let Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
let Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
// Display Django messages
{% if messages %}
{% for message in messages %}
Toast.fire({
icon: "{{ message.tags }}",
titleText: "{{ message|safe }}"
});
{% endfor %}
{% endif %}
{% if messages %}
{% for message in messages %}
Toast.fire({
icon: "{{ message.tags }}",
titleText: "{{ message|safe }}"
});
{% endfor %}
{% endif %}
function openActionModal(leadId, currentAction, nextAction, nextActionDate) {
const modal = new bootstrap.Modal(document.getElementById('actionTrackingModal'));
document.getElementById('leadId').value = leadId;
document.getElementById('currentAction').value = currentAction;
document.getElementById('nextAction').value = nextAction;
document.getElementById('nextActionDate').value = nextActionDate;
modal.show();
}
function openActionModal(leadId, currentAction, nextAction, nextActionDate) {
const modal = new bootstrap.Modal(document.getElementById('actionTrackingModal'));
document.getElementById('leadId').value = leadId;
document.getElementById('currentAction').value = currentAction;
document.getElementById('nextAction').value = nextAction;
document.getElementById('nextActionDate').value = nextActionDate;
modal.show();
}
document.getElementById('actionTrackingForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
document.getElementById('actionTrackingForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
// Show loading indicator
Swal.fire({
toast: true,
icon: 'info',
text: 'Please wait...',
allowOutsideClick: false,
position: "top-end",
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
Swal.fire({
toast: true,
icon: 'info',
text: 'Please wait...',
allowOutsideClick: false,
position: "top-end",
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
fetch("{% url 'update_lead_actions' %}", {
method: 'POST',
body: formData,
headers: {
'X-CSRFToken': '{{ csrf_token }}'
}
})
.then(response => response.json())
.then(data => {
Swal.close();
if (data.success) {
fetch("{% url 'update_lead_actions' %}", {
method: 'POST',
body: formData,
headers: {
'X-CSRFToken': '{{ csrf_token }}'
}
})
.then(response => response.json())
.then(data => {
Swal.close();
if (data.success) {
// Success notification
Swal.fire({
toast: true,
icon: 'success',
position: "top-end",
text: data.message || 'Actions updated successfully',
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
}).then(() => {
location.reload(); // Refresh after user clicks OK
});
} else {
Swal.fire({
toast: true,
icon: 'success',
position: "top-end",
text: data.message || 'Actions updated successfully',
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
}).then(() => {
location.reload(); // Refresh after user clicks OK
});
} else {
// Error notification
Swal.fire({
toast: true,
icon: 'error',
position: "top-end",
text: data.message || 'Failed to update actions',
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
}
})
.catch(error => {
Swal.close();
console.error('Error:', error);
Swal.fire({
toast: true,
icon: 'error',
position: "top-end",
text: 'An unexpected error occurred',
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
});
});
Swal.fire({
toast: true,
icon: 'error',
position: "top-end",
text: data.message || 'Failed to update actions',
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
}
})
.catch(error => {
Swal.close();
console.error('Error:', error);
Swal.fire({
toast: true,
icon: 'error',
position: "top-end",
text: 'An unexpected error occurred',
showConfirmButton: false,
timer: 2000,
timerProgressBar: false,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
});
});
// Helper function for notifications
function notify(tag, msg) {
Toast.fire({
icon: tag,
titleText: msg
});
}
</script>
function notify(tag, msg) {
Toast.fire({
icon: tag,
titleText: msg
});
}
</script>
{% endblock customJS %}

10
templates/crm/leads/lead_send.html
View File

@ -5,12 +5,12 @@
{% block title %}{{ _("Leads") }}{% endblock title %}
{% block content %}
<div class="card email-content">
<div class="card email-content">
<h5 class="card-header">Send Mail</h5>
<div class="card-body">
<form class="d-flex flex-column h-100" action="{% url 'send_lead_email' lead.pk %}" method="post">
{% csrf_token %}
<div class="row g-3 mb-2">
<div class="row g-3 mb-2">
<div class="col-12">
<input class="form-control" id="to" name="to" type="text" placeholder="To" value="{{lead.email}}" />
</div>
@ -24,7 +24,7 @@
<div class="mb-3 flex-1">
<input class="form-control" id="email_pk" name="email_pk" type="text" hidden value="{{email_pk}}" />
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex gap-2">
<a href="{% url 'lead_detail' lead.pk %}" class="btn btn-link text-body fs-10 text-decoration-none">Discard</a>
<a hx-boost="true" hx-push-url='false' hx-include="#message,#subject,#to" href="{% url 'send_lead_email' lead.pk %}?status=draft" class="btn btn-secondary text-white fs-10 text-decoration-none">Save as Draft</a>
@ -34,7 +34,7 @@
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}

173
templates/crm/leads/lead_tracking.html
View File

@ -3,46 +3,62 @@
{% block title %}{{ _('Leads')|capfirst }}{% endblock title %}
{% block customCSS %}
<style>
.kanban-column {
background-color: #f8f9fa;
border-radius: 8px;
padding: 1rem;
min-height: 500px;
}
.kanban-header {
position: relative;
background-color:rgb(237, 241, 245);
font-weight: 600;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
color: #333;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
<style>
.kanban-column {
background-color: #f8f9fa;
border-radius: 8px;
padding: 1rem;
min-height: 500px;
}
.kanban-header {
position: relative;
background-color:rgb(237, 241, 245);
font-weight: 600;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
color: #333;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.kanban-header::after {
content: "";
position: absolute;
right: -20px;
top: 0;
width: 0;
height: 0;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-left: 20px solid #dee2e6;
}
.lead-card {
background-color: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 0.75rem;
margin-bottom: 1rem;
}
.lead-card small {
color: #6c757d;
}
</style>
.kanban-header::after {
content: "";
position: absolute;
right: -20px;
top: 0;
width: 0;
height: 0;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-left: 20px solid #dee2e6;
}
.lead-card {
background-color: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 0.75rem;
margin-bottom: 1rem;
}
.lead-card small {
color: #6c757d;
}
.bg-success-soft {
background-color: rgba(17, 240, 66, 0.1) !important;
opacity: .8;
}
.bg-danger-soft {
background-color: rgba(230, 50, 68, 0.1) !important;
opacity: .8;
}
.bg-info-soft {
background-color: rgba(41, 197, 245, 0.1) !important;
opacity: .8;
}
.bg-negotiation-soft {
background-color: rgba(113, 206, 206, 0.1) !important;
opacity: .8;
}
</style>
{% endblock customCSS %}
{% block content %}
<div class="container-fluid my-4">
@ -51,11 +67,11 @@
</div>
<div class="row g-3">
<!-- Column Template -->
<!-- New Lead -->
<div class="col-md">
<div class="kanban-column">
<div class="kanban-header">New Leads ({{new|length}})</div>
{% for lead in new %}
{% for lead in new %}
<a href="{% url 'lead_detail' lead.id %}">
<div class="lead-card">
<strong>{{lead.full_name|capfirst}}</strong><br>
@ -63,7 +79,7 @@
<small>{{lead.phone_number}}</small>
</div>
</a>
{% endfor %}
{% endfor %}
</div>
</div>
@ -71,23 +87,7 @@
<div class="col-md">
<div class="kanban-column">
<div class="kanban-header">Follow Ups ({{follow_up|length}})</div>
{% for lead in follow_up %}
<a href="{% url 'lead_detail' lead.id %}">
<div class="lead-card">
<strong>{{lead.full_name|capfirst}}</strong><br>
<small>{{lead.email}}</small><br>
<small>{{lead.phone_number}}</small>
</div>
</a>
{% endfor %}
</div>
</div>
<!-- Under Review -->
<div class="col-md">
<div class="kanban-column">
<div class="kanban-header">Won ({{won|length}})</div>
{% for lead in won %}
{% for lead in follow_up %}
<a href="{% url 'lead_detail' lead.id %}">
<div class="lead-card">
<strong>{{lead.full_name|capfirst}}</strong><br>
@ -95,23 +95,7 @@
<small>{{lead.phone_number}}</small>
</div>
</a>
{% endfor %}
</div>
</div>
<!-- Demo -->
<div class="col-md">
<div class="kanban-column">
<div class="kanban-header">Lose ({{lose|length}})</div>
{% for lead in lose %}
<a href="{% url 'lead_detail' lead.id %}">
<div class="lead-card">
<strong>{{lead.full_name|capfirst}}</strong><br>
<small>{{lead.email}}</small><br>
<small>{{lead.phone_number}}</small>
</div>
</a>
{% endfor %}
{% endfor %}
</div>
</div>
@ -119,7 +103,7 @@
<div class="col-md">
<div class="kanban-column">
<div class="kanban-header">Negotiation ({{negotiation|length}})</div>
{% for lead in negotiation %}
{% for lead in negotiation %}
<a href="{% url 'lead_detail' lead.id %}">
<div class="lead-card">
<strong>{{lead.full_name|capfirst}}</strong><br>
@ -127,9 +111,42 @@
<small>{{lead.phone_number}}</small>
</div>
</a>
{% endfor %}
{% endfor %}
</div>
</div>
<!-- Won -->
<div class="col-md">
<div class="kanban-column">
<div class="kanban-header">Won ({{won|length}})</div>
{% for lead in won %}
<a href="{% url 'lead_detail' lead.id %}">
<div class="lead-card">
<strong>{{lead.full_name|capfirst}}</strong><br>
<small>{{lead.email}}</small><br>
<small>{{lead.phone_number}}</small>
</div>
</a>
{% endfor %}
</div>
</div>
<!-- Lose -->
<div class="col-md">
<div class="kanban-column">
<div class="kanban-header">Lose ({{lose|length}})</div>
{% for lead in lose %}
<a href="{% url 'lead_detail' lead.id %}">
<div class="lead-card">
<strong>{{lead.full_name|capfirst}}</strong><br>
<small>{{lead.email}}</small><br>
<small>{{lead.phone_number}}</small>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}

14
templates/crm/leads/lead_view.html
View File

@ -15,14 +15,14 @@
background-color: #f9fafb;
}
.empty-state {
text-align: center;
padding: 50px;
color: #aaa;
}
</style>
{% endblock customCSS %}
text-align: center;
padding: 50px;
color: #aaa;
}
</style>
{% endblock customCSS %}
{% block content %}
{% block content %}
<div class="container-fluid">
<!-- Welcome Row -->
<div class="d-flex justify-content-between align-items-center mb-3">

26
templates/crm/leads/schedule_lead.html
View File

@ -2,20 +2,20 @@
{% load i18n static crispy_forms_filters %}
{% block content %}
<h3>{% if object %}{{ _("Update") }}{% else %}{{ _("Create") }}{% endif %}</h3>
<form method="post">
<h3>{% if object %}{{ _("Update") }}{% else %}{{ _("Create") }}{% endif %}</h3>
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<button
type="submit"
name="schedule_lead"
id="lead-save"
class="btn btn-phoenix-primary"
>
{{ _("Save") }}
</button>
<a href="{% url 'lead_list' %}" class="btn btn-phoenix-secondary">
{{ _("Cancel") }}
</a>
</form>
type="submit"
name="schedule_lead"
id="lead-save"
class="btn btn-phoenix-primary"
>
{{ _("Save") }}
</button>
<a href="{% url 'lead_list' %}" class="btn btn-phoenix-secondary">
{{ _("Cancel") }}
</a>
</form>
{% endblock %}

20
templates/crm/note_form.html
View File

@ -2,16 +2,16 @@
{% if form.instance.pk %}
<form method="post" action="{% url 'update_note_to_lead' note.pk %}" enctype="multipart/form-data">
{% else %}
{% else %}
<form method="post" action="{% url 'add_note_to_lead' lead.pk %}" enctype="multipart/form-data">
{% endif %}
{% endif %}
{% csrf_token %}
{{ form|crispy }}
{% csrf_token %}
{{ form|crispy }}
{% if form.instance.pk %}
<button type="submit" class="btn btn-sm btn-primary w-100">{{ _("Update") }}</button>
{% else %}
<button type="submit" class="btn btn-sm btn-success w-100">{{ _("Add") }}</button>
{% endif %}
</form>
{% if form.instance.pk %}
<button type="submit" class="btn btn-sm btn-primary w-100">{{ _("Update") }}</button>
{% else %}
<button type="submit" class="btn btn-sm btn-success w-100">{{ _("Add") }}</button>
{% endif %}
</form>

58
templates/crm/notifications.html
View File

@ -1,34 +1,34 @@
{% load i18n static %}
<div class="dropdown-menu dropdown-menu-end notification-dropdown-menu py-0 shadow border navbar-dropdown-caret" id="navbarDropdownNotfication" aria-labelledby="navbarDropdownNotfication">
<div class="card position-relative border-0">
<div class="card-header p-2">
<div class="d-flex justify-content-between">
<h5 class="text-body-emphasis mb-0">Notifications</h5>
</div>
</div>
<div class="card-body p-0">
<div class="scrollbar-overlay" style="height: 27rem;">
<div class="px-2 px-sm-3 py-3 notification-card position-relative border-bottom">
<div class="d-flex align-items-center justify-content-between position-relative">
<div class="d-flex">
<div class="flex-1 me-sm-3">
<h4 class="fs-9 text-body-emphasis">{{ _("System") }}</h4>
<ul id="notification-list">
<div class="card position-relative border-0">
<div class="card-header p-2">
<div class="d-flex justify-content-between">
<h5 class="text-body-emphasis mb-0">Notifications</h5>
</div>
</div>
<div class="card-body p-0">
<div class="scrollbar-overlay" style="height: 27rem;">
<div class="px-2 px-sm-3 py-3 notification-card position-relative border-bottom">
<div class="d-flex align-items-center justify-content-between position-relative">
<div class="d-flex">
<div class="flex-1 me-sm-3">
<h4 class="fs-9 text-body-emphasis">{{ _("System") }}</h4>
<ul id="notification-list">
</ul>
</div>
</div>
<div class="dropdown notification-dropdown">
<button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10 text-body"></span></button>
<div class="dropdown-menu py-2"><a class="dropdown-item">Mark as Read</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer p-0 border-top border-translucent border-0">
<div class="my-2 text-center fw-bold fs-10 text-body-tertiary text-opactity-85"><a class="fw-bolder" href="{% url 'notifications_history' %}">Notification history</a></div>
</div>
</div>
</ul>
</div>
</div>
<div class="dropdown notification-dropdown">
<button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10 text-body"></span></button>
<div class="dropdown-menu py-2"><a class="dropdown-item">Mark as Read</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer p-0 border-top border-translucent border-0">
<div class="my-2 text-center fw-bold fs-10 text-body-tertiary text-opactity-85"><a class="fw-bolder" href="{% url 'notifications_history' %}">Notification history</a></div>
</div>
</div>
</div>

80
templates/crm/notifications_history.html
View File

@ -2,52 +2,52 @@
{% block content %}
<div class="content">
<div class="content">
<h2 class="mb-5">{{ _("Notifications") }}</h2>
{% if notifications %}
<div class="mx-n4 mx-lg-n6 mb-5 border-bottom">
{% for notification in notifications %}
<div class="d-flex align-items-center justify-content-between py-3 px-lg-6 px-4 notification-card border-top">
<div class="d-flex">
<div class="me-3 flex-1 mt-2">
<h4 class="fs-9 text-body-emphasis">{{ _("System")}}:</h4>
{% if not notification.is_read %}
<p class="fs-9 text-body-highlight"><span class="far fa-envelope text-success-dark fs-8 me-1"></span><span class="me-1">{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span></p>
{% else %}
<p class="fs-9 text-body-highlight"><span class="far fa-envelope-open text-danger-dark fs-8 me-1"></span><span>{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span></p>
{% endif %}
<p class="text-body-secondary fs-9 mb-0"><span class="me-1 far fa-clock"></span>{{ notification.created }}</p>
</div>
{% if notifications %}
<div class="mx-n4 mx-lg-n6 mb-5 border-bottom">
{% for notification in notifications %}
<div class="d-flex align-items-center justify-content-between py-3 px-lg-6 px-4 notification-card border-top">
<div class="d-flex">
<div class="me-3 flex-1 mt-2">
<h4 class="fs-9 text-body-emphasis">{{ _("System")}}:</h4>
{% if not notification.is_read %}
<p class="fs-9 text-body-highlight"><span class="far fa-envelope text-success-dark fs-8 me-1"></span><span class="me-1">{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span></p>
{% else %}
<p class="fs-9 text-body-highlight"><span class="far fa-envelope-open text-danger-dark fs-8 me-1"></span><span>{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span></p>
{% endif %}
<p class="text-body-secondary fs-9 mb-0"><span class="me-1 far fa-clock"></span>{{ notification.created }}</p>
</div>
</div>
<div class="dropdown">
<button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none notification-dropdown-toggle" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10 text-body"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="{% url 'mark_notification_as_read' notification.pk %}">{{ _("Mark as Read")}}</a></div>
</div>
</div>
{% endfor %}
</div>
<div class="dropdown">
<button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none notification-dropdown-toggle" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10 text-body"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="{% url 'mark_notification_as_read' notification.pk %}">{{ _("Mark as Read")}}</a></div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="pagination">
<span class="step-links">
{% if notifications.has_previous %}
<a href="?page=1">&laquo; first</a>
<a href="?page={{ notifications.previous_page_number }}">previous</a>
{% endif %}
<div class="pagination">
<span class="step-links">
{% if notifications.has_previous %}
<a href="?page=1">&laquo; first</a>
<a href="?page={{ notifications.previous_page_number }}">previous</a>
{% endif %}
<span class="current">
Page {{ notifications.number }} of {{ notifications.paginator.num_pages }}.
</span>
<span class="current">
Page {{ notifications.number }} of {{ notifications.paginator.num_pages }}.
</span>
{% if notifications.has_next %}
<a href="?page={{ notifications.next_page_number }}">next</a>
<a href="?page={{ notifications.paginator.num_pages }}">last &raquo;</a>
{% endif %}
</span>
</div>
{% else %}
<p>No notifications found.</p>
{% endif %}
{% if notifications.has_next %}
<a href="?page={{ notifications.next_page_number }}">next</a>
<a href="?page={{ notifications.paginator.num_pages }}">last &raquo;</a>
{% endif %}
</span>
</div>
{% else %}
<p>No notifications found.</p>
{% endif %}

14
templates/crm/opportunities/opportunity_confirm_delete.html
View File

@ -1,11 +1,11 @@
{% extends 'base.html' %}
{% block content %}
<h1>Delete Opportunity</h1>
<p>Are you sure you want to delete "{{ object.deal_name }}"?</p>
<form method="post">
{% csrf_token %}
<button type="submit">Yes, delete</button>
<a href="{% url 'opportunity_list' %}">Cancel</a>
</form>
<h1>Delete Opportunity</h1>
<p>Are you sure you want to delete "{{ object.deal_name }}"?</p>
<form method="post">
{% csrf_token %}
<button type="submit">Yes, delete</button>
<a href="{% url 'opportunity_list' %}">Cancel</a>
</form>
{% endblock %}

104
templates/crm/opportunities/opportunity_detail.html
View File

@ -1,5 +1,5 @@
{% extends 'base.html' %}
{% load i18n static %}
{% load i18n static humanize %}
{% block content %}
<div class="row align-items-center justify-content-between g-3 mb-4">
@ -18,7 +18,8 @@
<a class="dropdown-item" href="{% url 'estimate_create_from_opportunity' opportunity.pk %}">{{ _("Create Quotation")}}</a>
{% endif %}
</li>
<li><a class="dropdown-item text-danger" href="">Delete Lead</a></li>
<li><a class="dropdown-item" href="{% url 'update_opportunity' opportunity.pk %}">Update Opportunity</a></li>
<li><a class="dropdown-item text-danger" href="">Delete Opportunity</a></li>
</ul>
</div>
</div>
@ -33,10 +34,10 @@
{% if opportunity.car %}
<h3 class="fw-bolder mb-2 line-clamp-1">{{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h3>
{% endif %}
<h3 class="fw-bolder mb-2 line-clamp-1">{{ opportunity.customer.customer_name }}</h3>
<h3 class="fw-bolder mb-2 line-clamp-1">{{ opportunity.customer.customer_name }}</h3>
<div class="d-flex align-items-center mb-4">
{% if opportunity.car.finances %}
<h5 class="mb-0 me-4">{{ opportunity.car.finances.total }} <span class="fw-light"><span class="currency">{{ CURRENCY }}</span></span></h5>
<h5 class="mb-0 me-4">{{ opportunity.car.finances.total }} <span class="fw-light"><span class="currency">{{ CURRENCY }}</span></span></h5>
{% endif %}
</div>
<div class="d-md-flex d-xl-block align-items-center justify-content-between mb-5">
@ -49,7 +50,7 @@
<div>
<h5>{{ opportunity.staff.get_local_name}}</h5>
<div class="dropdown"><a class="text-body-secondary dropdown-toggle text-decoration-none dropdown-caret-none" href="#!" data-bs-toggle="dropdown" aria-expanded="false">
Owner<span class="fa-solid fa-caret-down text-body-secondary fs-9 ms-2"></span></a>
Owner<span class="fa-solid fa-caret-down text-body-secondary fs-9 ms-2"></span></a>
<div class="dropdown-menu shadow-sm" style="min-width:20rem">
<div class="card position-relative border-0">
<div class="card-body p-0">
@ -86,14 +87,14 @@
<div class="mb-4">
<div class="d-flex flex-wrap justify-content-between mb-2">
<h5 class="mb-0 text-body-highlight me-2">{{ _("Status") }}</h5>
<a href="#" class="fw-bold fs-9" hx-on:click="htmx.find('#id_status').disabled = !htmx.find('#id_status').disabled;this.text = htmx.find('#id_status').disabled ? 'Update Status' : 'Cancel'">{{ _("Update Status")}}</a>
<a href="#" class="fw-bold fs-9" hx-on:click="htmx.find('#id_status').disabled = !htmx.find('#id_status').disabled;this.text = htmx.find('#id_status').disabled ? 'Update Status' : 'Cancel'">{{ _("Update Status")}}</a>
</div>
{{status_form.status}}
</div>
<div class="mb-4">
<div class="d-flex flex-wrap justify-content-between mb-2">
<h5 class="mb-0 text-body-highlight me-2">{{ _("Stage") }}</h5>
<a href="#" class="fw-bold fs-9" hx-on:click="htmx.find('#id_stage').disabled = !htmx.find('#id_stage').disabled;this.text = htmx.find('#id_stage').disabled ? 'Update Stage' : 'Cancel'">{{ _("Update Stage")}}</a>
<a href="#" class="fw-bold fs-9" hx-on:click="htmx.find('#id_stage').disabled = !htmx.find('#id_stage').disabled;this.text = htmx.find('#id_stage').disabled ? 'Update Stage' : 'Cancel'">{{ _("Update Stage")}}</a>
</div>
{{status_form.stage}}
</div>
@ -169,9 +170,9 @@
<p class="fw-bold mb-0">{{ _("Estimated Revenue") }}</p>
</div>
</td>
<td class="py-2 d-none d-sm-block pe-sm-2">:{{opportunity.estimate.get_revenue_estimate}}</td>
<td class="py-2 d-none d-sm-block pe-sm-2">:</td>
<td class="py-2">
<p class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.car.finances.revenue }}</p>
<p class="ps-6 ps-sm-0 fw-semibold mb-0"><span class="currency">{{CURRENCY}}</span>{{ opportunity.expected_revenue }}</p>
</td>
</tr>
</table>
@ -296,35 +297,35 @@
</div>
</div>
<div class="col-auto">
<button class="btn btn-phoenix-primary px-6">Add Activity</button>
<button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#activityModal"><span class="fas fa-plus me-1"></span>{{ _("Add Activity") }}</button>
</div>
</div>
{% for activity in activities %}
<div class="border-bottom border-translucent py-4">
<div class="d-flex">
<div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle" style="width:25px; height:25px">
{% if activity.activity_type == "call" %}
<span class="fa-solid fa-phone text-warning fs-8"></span>
<div class="border-bottom border-translucent py-4">
<div class="d-flex">
<div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle" style="width:25px; height:25px">
{% if activity.activity_type == "call" %}
<span class="fa-solid fa-phone text-warning fs-8"></span>
{% elif activity.activity_type == "email" %}
<span class="fa-solid fa-envelope text-info-light fs-8"></span>
{% elif activity.activity_type == "visit" %}
<span class="fa-solid fa-users text-danger fs-8"></span>
<span class="fa-solid fa-envelope text-info-light fs-8"></span>
{% elif activity.activity_type == "meeting" %}
<span class="fa-solid fa-users text-danger fs-8"></span>
{% elif activity.activity_type == "whatsapp" %}
<span class="fab fa-whatsapp text-success-dark fs-7"></span>
{% endif %}
</div>
<div class="flex-1">
<div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
<div class="flex-1 me-2">
<h5 class="text-body-highlight lh-sm"></h5>
<p class="fs-9 mb-0">by<a class="ms-1" href="#!">{{activity.created_by}}</a></p>
</div>
<div class="fs-9"><span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{activity.created}}</span></div>
<span class="fab fa-whatsapp text-success-dark fs-7"></span>
{% endif %}
</div>
<div class="flex-1">
<div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
<div class="flex-1 me-2">
<h5 class="text-body-highlight lh-sm"></h5>
<p class="fs-9 mb-0">by<a class="ms-1" href="#!">{{activity.created_by}}</a></p>
</div>
<div class="fs-9"><span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{activity.created|naturalday|capfirst}}</span></div>
</div>
<p class="fs-9 mb-0"></p>
</div>
<p class="fs-9 mb-0"></p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="tab-pane fade" id="tab-notes" role="tabpanel" aria-labelledby="notes-tab">
@ -337,13 +338,13 @@
<div class="row gy-4 note-list">
<div class="col-12 col-xl-auto flex-1">
{% for note in notes %}
<div class="border-2 border-dashed mb-4 pb-4 border-bottom border-translucent">
<p class="mb-1 text-body-highlight">{{ note.note }}</p>
<div class="d-flex">
<div class="fs-9 text-body-tertiary text-opacity-85"><span class="fa-solid fa-clock me-2"></span><span class="fw-semibold me-1">{{note.created}}</span></div>
<p class="fs-9 mb-0 text-body-tertiary text-opacity-85">by<a class="ms-1 fw-semibold" href="#!">{{note.created_by}}</a></p>
<div class="border-2 border-dashed mb-4 pb-4 border-bottom border-translucent">
<p class="mb-1 text-body-highlight">{{ note.note }}</p>
<div class="d-flex">
<div class="fs-9 text-body-tertiary text-opacity-85"><span class="fa-solid fa-clock me-2"></span><span class="fw-semibold me-1">{{note.created}}</span></div>
<p class="fs-9 mb-0 text-body-tertiary text-opacity-85">by<a class="ms-1 fw-semibold" href="#!">{{note.created_by}}</a></p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
@ -382,7 +383,7 @@
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
@ -473,20 +474,20 @@
</thead>
<tbody class="list" id="all-email-table-body">
{% for email in opportunity.lead.get_emails %}
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="fs-9 align-middle px-0 py-3">
<div class="form-check mb-0 fs-8">
<input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
</div>
</td>
<td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">{{email.subject}}</a>
<div class="fs-10 d-block">{{email.to_email}}</div>
</td>
<td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{email.from_email}}</td>
<td class="date align-middle white-space-nowrap text-body py-2">{{email.created}}</td>
<td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
<td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="fs-9 align-middle px-0 py-3">
<div class="form-check mb-0 fs-8">
<input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
</div>
</td>
<td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">{{email.subject}}</a>
<div class="fs-10 d-block">{{email.to_email}}</div>
</td>
<td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{email.from_email}}</td>
<td class="date align-middle white-space-nowrap text-body py-2">{{email.created}}</td>
<td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
<td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
</tr>
{% endfor %}
</tbody>
</table>
@ -552,4 +553,5 @@
</div>
</div>
</div>
{% include "components/activity_modal.html" with content_type="opportunity" pk=opportunity.pk %}
{% endblock %}

286
templates/crm/opportunities/opportunity_form.html
View File

@ -1,95 +1,203 @@
{% extends "base.html" %} <!-- Assuming you have a base template -->
{% load i18n %} <!-- Load the internationalization template tags -->
{% extends 'base.html' %}
{% load i18n static widget_tweaks custom_filters %}
{% block content %}
<div class="row g-3">
<div class="col-sm-6 col-md-8">
<h2>{% if form.instance.pk %}{{ _("Edit Opportunity") }}{% else %}{{ _("Add New Opportunity") }}{% endif %}</h2>
</div>
<div class="col-sm-6 col-md-8">
<form class="row g-3" method="post" class="form" novalidate>
{% csrf_token %}
<!-- Customer -->
<div class="col-sm-6 col-md-4">
<div class="form-floating">
<select class="form-control" id="{{ form.customer.id_for_label }}" name="{{ form.customer.name }}">
{% for value, label in form.customer.field.choices %}
<option value="{{ value }}" {% if form.customer.value == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
<label for="{{ form.customer.id_for_label }}">{{ _("Customer") }}</label>
</div>
{{ form.customer.errors }}
</div>
<!-- Car -->
<div class="col-sm-6 col-md-4">
<div class="form-floating">
<select class="form-control" id="{{ form.car.id_for_label }}" name="{{ form.car.name }}">
{% for value, label in form.car.field.choices %}
<option value="{{ value }}" {% if form.car.value == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
<label for="{{ form.car.id_for_label }}">{{ _("Car") }}</label>
</div>
{{ form.car.errors }}
</div>
<!-- Stage -->
<div class="col-sm-6 col-md-4">
<div class="form-floating">
<select class="form-control" id="{{ form.stage.id_for_label }}" name="{{ form.stage.name }}">
{% for value, label in form.stage.field.choices %}
<option value="{{ value }}" {% if form.stage.value == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
<label for="{{ form.stage.id_for_label }}">{{ _("Stage") }}</label>
</div>
{{ form.stage.errors }}
</div>
<!-- Probability -->
<div class="col-sm-6 col-md-4">
<div class="form-floating">
<input type="number" class="form-control" id="{{ form.probability.id_for_label }}" name="{{ form.probability.name }}" value="{{ form.probability.value|default:'' }}" placeholder="{{ _('Enter probability') }}">
<label for="{{ form.probability.id_for_label }}">{{ _("Probability") }}</label>
</div>
{{ form.probability.errors }}
</div>
<!-- Staff -->
<div class="col-sm-6 col-md-4">
<div class="form-floating">
<select class="form-control" id="{{ form.staff.id_for_label }}" name="{{ form.staff.name }}">
{% for value, label in form.staff.field.choices %}
<option value="{{ value }}" {% if form.staff.value == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
<label for="{{ form.staff.id_for_label }}">{{ _("Staff") }}</label>
</div>
{{ form.staff.errors }}
</div>
<!-- closing date-->
<div class="col-sm-6 col-md-4">
<div class="form-floating">
<input type="date" class="form-control" id="{{ form.closing_date.id_for_label }}" name="{{ form.closing_date.name }}" value="{{ form.closing_date.value|date:'Y-m-d' }}">
<label for="{{ form.closing_date.id_for_label }}">{{ _("Closing Date")}}</label>
{{ form.closing_date.errors }}
</div>
{{ form.closing_date.errors }}
</div>
<!-- Buttons -->
<div class="row mt-4">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary">{{ _("Save") }}</button>
<a href="{% url 'opportunity_list' %}" class="btn btn-secondary">{{ _("Cancel") }}</a>
</div>
<div class="container-fluid">
<div class="row g-3 mb-4 align-items-center">
<div class="col">
<h2 class="mb-0">
{% if form.instance.pk %}
{% trans "Edit Opportunity" %}
{% else %}
{% trans "Create New Opportunity" %}
{% endif %}
</h2>
</div>
<div class="col-auto">
<a href="{% url 'opportunity_list' %}" class="btn btn-phoenix-secondary">
<span class="fas fa-arrow-left me-2"></span>{% trans "Back to list" %}
</a>
</div>
</div>
</form>
<div class="row g-3">
<div class="col-lg-8">
<div class="card">
<div class="card-body p-4 p-sm-5">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{% if form.non_field_errors %}
<div class="alert alert-danger">
{{ form.non_field_errors }}
</div>
{% endif %}
<!-- Lead Field -->
<div class="mb-4">
<label class="form-label" for="{{ form.lead.id_for_label }}">
{{ form.lead.label }}
<span class="text-danger">*</span>
</label>
{{ form.lead|add_class:"form-control" }}
{% if form.lead.errors %}
<div class="invalid-feedback d-block">
{{ form.lead.errors }}
</div>
{% endif %}
</div>
<!-- Car Field -->
<div class="mb-4">
<label class="form-label" for="{{ form.car.id_for_label }}">
{{ form.car.label }}
<span class="text-danger">*</span>
</label>
{{ form.car|add_class:"form-control" }}
{% if form.car.errors %}
<div class="invalid-feedback d-block">
{{ form.car.errors }}
</div>
{% endif %}
</div>
<!-- Stage Field -->
<div class="mb-4">
<label class="form-label" for="{{ form.stage.id_for_label }}">
{{ form.stage.label }}
<span class="text-danger">*</span>
</label>
{{ form.stage|add_class:"form-control" }}
{% if form.stage.errors %}
<div class="invalid-feedback d-block">
{{ form.stage.errors }}
</div>
{% endif %}
</div>
<!-- Probability Field -->
<div class="mb-4">
<label class="form-label" for="{{ form.probability.id_for_label }}">
{{ form.probability.label }}
<span class="text-danger">*</span>
</label>
<div class="d-flex align-items-center gap-3">
<input type="range"
name="{{ form.probability.name }}"
id="{{ form.probability.id_for_label }}"
min="0" max="100" step="1"
value="{{ form.probability.value|default:'50' }}"
class="form-control form-range"
oninput="updateProbabilityValue(this.value)">
<span id="probability-value" class="badge badge-phoenix fs-6 badge-phoenix-primary">
{{ form.probability.value|default:'50' }}%
</span>
</div>
{% if form.probability.errors %}
<div class="invalid-feedback d-block">
{{ form.probability.errors }}
</div>
{% endif %}
</div>
<!-- Expected Revenue -->
<div class="mb-4">
<label class="form-label" for="{{ form.expected_revenue.id_for_label }}">
{{ form.expected_revenue.label }}
</label>
<div class="input-group">
<span class="input-group-text"><span class="currency">{{CURRENCY}}</span></span>
{{ form.expected_revenue|add_class:"form-control" }}
</div>
{% if form.expected_revenue.errors %}
<div class="invalid-feedback d-block">
{{ form.expected_revenue.errors }}
</div>
{% endif %}
</div>
<!-- Closing Date -->
<div class="mb-5">
<label class="form-label" for="{{ form.closing_date.id_for_label }}">
{{ form.closing_date.label }}
</label>
<div class="input-group">
{{ form.closing_date|add_class:"form-control" }}
<span class="input-group-text"><span class="far fa-calendar"></span></span>
</div>
{% if form.closing_date.errors %}
<div class="invalid-feedback d-block">
{{ form.closing_date.errors }}
</div>
{% endif %}
</div>
<!-- Form Actions -->
<div class="d-flex justify-content-end gap-3">
<button type="reset" class="btn btn-phoenix-danger px-4">
<span class="fas fa-redo me-2"></span>{% trans "Reset" %}
</button>
<button type="submit" class="btn btn-phoenix-primary px-6">
{% if form.instance.pk %}
<span class="fas fa-save me-2"></span>{% trans "Update" %}
{% else %}
<span class="fas fa-plus me-2"></span>{% trans "Create" %}
{% endif %}
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body p-4">
<h4 class="mb-3">{% trans "Opportunity Guidelines" %}</h4>
<ul class="nav flex-column gap-2 nav-guide">
<li class="nav-item">
<div class="d-flex align-items-center">
<span class="fas fa-circle text-primary fs-11 me-2"></span>
<span class="text-body-highlight">{% trans "Probability indicates conversion chance" %}</span>
</div>
</li>
<li class="nav-item">
<div class="d-flex align-items-center">
<span class="fas fa-circle text-warning fs-11 me-2"></span>
<span class="text-body-highlight">{% trans "Update stage as deal progresses" %}</span>
</div>
</li>
<li class="nav-item">
<div class="d-flex align-items-center">
<span class="fas fa-circle text-success fs-11 me-2"></span>
<span class="text-body-highlight">{% trans "Set realistic closing dates" %}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
function updateProbabilityValue(value) {
const badge = document.getElementById('probability-value');
badge.textContent = value + '%';
// Update badge color based on value
if (value >= 75) {
badge.className = 'badge badge-phoenix fs-6 badge-phoenix-success';
} else if (value >= 50) {
badge.className = 'badge badge-phoenix fs-6 badge-phoenix-warning';
} else {
badge.className = 'badge badge-phoenix fs-6 badge-phoenix-danger';
}
}
// Initialize on load
document.addEventListener('DOMContentLoaded', function() {
const rangeInput = document.getElementById('{{ form.probability.id_for_label }}');
updateProbabilityValue(rangeInput.value);
});
</script>
{% endblock %}

918
templates/crm/opportunities/opportunity_list copy.html
View File

@ -4,499 +4,499 @@
{% block content %}
<div class="px-4 px-lg-6">
<h2 class="mb-5">{{ _("Opportunities") }}</h2>
<div class="d-xl-flex justify-content-between">
<div class="mb-3">
<a class="btn btn-primary me-4" href="{% url 'opportunity_create' %}"><span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}</a>
</div>
<div class="px-4 px-lg-6">
<h2 class="mb-5">{{ _("Opportunities") }}</h2>
<div class="d-xl-flex justify-content-between">
<div class="mb-3">
<a class="btn btn-primary me-4" href="{% url 'opportunity_create' %}"><span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}</a>
</div>
</div>
</div>
<div class="px-4 px-lg-6 scrollbar">
<div class="deals">
{% for opportunity in opportunities %}
<div class="deals-col col-sm-6 me-4 mt-4">
<div class="d-flex align-items-center justify-content-between position-sticky top-0 z-1 bg-body">
<div>
<h5 class="mb-2 ms-4">{{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h5>
</div>
<div class="d-flex gap-3">
<button class="btn p-0" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="{% url 'update_opportunity' pk=opportunity.pk %}">{{ _("Edit") }}</a></li>
<li><button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans "Delete" %}</button></li>
</ul>
</div>
</div>
<div class=" deals-items-row">
<div class="w-100 min-vh-50" >
<div>
<div class="card mb-3">
<div class="card-body">
<a class="dropdown-indicator-icon position-absolute text-body-tertiary text-end"
href="#collapseWidthDeals-1"
role="button"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="collapseWidthDeals-1">
<span class="fa-solid fa-angle-down text-end"></span>
</a>
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="d-flex gap-3">
<div class="px-4 px-lg-6 scrollbar">
<div class="deals">
{% for opportunity in opportunities %}
<div class="deals-col col-sm-6 me-4 mt-4">
<div class="d-flex align-items-center justify-content-between position-sticky top-0 z-1 bg-body">
<div>
<h5 class="mb-2 ms-4">{{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h5>
</div>
<div class="d-flex gap-3">
<button class="btn p-0" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="{% url 'update_opportunity' pk=opportunity.pk %}">{{ _("Edit") }}</a></li>
<li><button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans "Delete" %}</button></li>
</ul>
</div>
</div>
<div class=" deals-items-row">
<div class="w-100 min-vh-50" >
<div>
<div class="card mb-3">
<div class="card-body">
<a class="dropdown-indicator-icon position-absolute text-body-tertiary text-end"
href="#collapseWidthDeals-1"
role="button"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="collapseWidthDeals-1">
<span class="fa-solid fa-angle-down text-end"></span>
</a>
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="d-flex gap-3">
</div>
<div class="d-flex">
<span class="me-2" data-feather="clock" style="stroke-width:2;"></span>
<p class="mb-0 fs-9 fw-semibold text-body-tertiary date">{{ opportunity.created|date }}<span class="text-body-quaternary"> . {{ opportunity.created|time}}</span></p>
</div>
</div>
<div class="deals-items-head d-flex align-items-center mb-2">
<a class="text-primary fw-bold line-clamp-1 me-3 mb-0 fs-9" href="{% url 'opportunity_detail' opportunity.pk %}">{{ _("View") }}</a>
<p class="fs-10 mb-0 mt-1 d-none"><span class="me-1 text-body-quaternary" data-feather="grid" style="stroke-width:2; height: 12px; width: 12px"></span>{{ opportunity.get_stage_display }}</p>
<p class="ms-auto fs-9 text-body-emphasis fw-semibold mb-0 deals-revenue">{{ opportunity.car.finances.total }}</p>
</div>
<div class="deals-company-agent d-flex flex-between-center">
<div class="d-flex align-items-center"><span class="uil uil-user me-2"></span>
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.customer.get_full_name }}</p>
</div>
<div class="d-flex align-items-center"><span class="uil uil-headphones me-2"></span>
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.staff.name }}</p>
</div>
</div>
<div class="collapse" id="collapseWidthDeals-1">
<div class="d-flex gap-2 mb-5"><span class="badge badge-phoenix fs-10 badge-phoenix-info">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{ opportunity.get_status_display }}</span></div>
<table class="mb-4 w-100 table-stats table-stats">
<tr>
<th>{{ _("Details") }}</th>
<th>:</th>
<th></th>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="dollar-sign"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
</div>
</td>
<td class="d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="ps-6 ps-sm-0 fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.car.finances.total }}</p>
</td>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="user" style="width:16px; height:16px"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Contact") }}</p>
</div>
</td>
<td class=" d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis d-flex align-items-center gap-2"><a href=""> <span class="fa-solid fa-square-phone text-body-tertiary"></span></a><a href=""> <span class="fa-solid fa-square-envelope text-body-tertiary"></span></a><a href=""> <span class="fab fa-whatsapp-square text-body-tertiary"></span></a></p>
</td>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="calendar" style="width:16px; height:16px"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
</div>
</td>
<td class=" d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.closing_date }}</p>
</td>
</tr>
</table>
<p class="fs-9 mb-1 fw-bold"> {{ _("Probability") }}: %</p>
<div class="progress" style="height:16px">
{% if opportunity.probability >= 25 and opportunity.probability < 49 %}
<div class="progress-bar rounded-pill bg-danger" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
</div>
{% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
<div class="progress-bar rounded-pill bg-warning" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
</div>
{% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
<div class="progress-bar rounded-pill bg-success" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="d-flex">
<span class="me-2" data-feather="clock" style="stroke-width:2;"></span>
<p class="mb-0 fs-9 fw-semibold text-body-tertiary date">{{ opportunity.created|date }}<span class="text-body-quaternary"> . {{ opportunity.created|time}}</span></p>
</div>
</div>
<div class="deals-items-head d-flex align-items-center mb-2">
<a class="text-primary fw-bold line-clamp-1 me-3 mb-0 fs-9" href="{% url 'opportunity_detail' opportunity.pk %}">{{ _("View") }}</a>
<p class="fs-10 mb-0 mt-1 d-none"><span class="me-1 text-body-quaternary" data-feather="grid" style="stroke-width:2; height: 12px; width: 12px"></span>{{ opportunity.get_stage_display }}</p>
<p class="ms-auto fs-9 text-body-emphasis fw-semibold mb-0 deals-revenue">{{ opportunity.car.finances.total }}</p>
</div>
<div class="deals-company-agent d-flex flex-between-center">
<div class="d-flex align-items-center"><span class="uil uil-user me-2"></span>
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.customer.get_full_name }}</p>
</div>
<div class="d-flex align-items-center"><span class="uil uil-headphones me-2"></span>
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.staff.name }}</p>
</div>
</div>
<div class="collapse" id="collapseWidthDeals-1">
<div class="d-flex gap-2 mb-5"><span class="badge badge-phoenix fs-10 badge-phoenix-info">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{ opportunity.get_status_display }}</span></div>
<table class="mb-4 w-100 table-stats table-stats">
<tr>
<th>{{ _("Details") }}</th>
<th>:</th>
<th></th>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="dollar-sign"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
</div>
</td>
<td class="d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="ps-6 ps-sm-0 fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.car.finances.total }}</p>
</td>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="user" style="width:16px; height:16px"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Contact") }}</p>
</div>
</td>
<td class=" d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis d-flex align-items-center gap-2"><a href=""> <span class="fa-solid fa-square-phone text-body-tertiary"></span></a><a href=""> <span class="fa-solid fa-square-envelope text-body-tertiary"></span></a><a href=""> <span class="fab fa-whatsapp-square text-body-tertiary"></span></a></p>
</td>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="calendar" style="width:16px; height:16px"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
</div>
</td>
<td class=" d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.closing_date }}</p>
</td>
</tr>
</table>
<p class="fs-9 mb-1 fw-bold"> {{ _("Probability") }}: %</p>
<div class="progress" style="height:16px">
{% if opportunity.probability >= 25 and opportunity.probability < 49 %}
<div class="progress-bar rounded-pill bg-danger" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
</div>
{% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
<div class="progress-bar rounded-pill bg-warning" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
</div>
{% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
<div class="progress-bar rounded-pill bg-success" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deleteModal"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="deleteModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
</div>
</div>
<div class="modal fade" id="deleteModal"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="deleteModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">
{% trans "Delete Opportunity" %}
{% trans "Delete Opportunity" %}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center">
</div>
<div class="modal-body text-center">
<p class="mb-0 text-danger fw-bold">
{% trans "Are you sure you want to delete this opportunity?" %}
{% trans "Are you sure you want to delete this opportunity?" %}
</p>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
{% trans "No" %}
{% trans "No" %}
</button>
<a type="button" class="btn btn-danger btn-sm" href="{% url 'delete_opportunity' opportunity.pk %}">
{% trans "Yes" %}
{% trans "Yes" %}
</a>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addOpportunityModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addOpportunityModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-body-highlight p-6">
<div class="modal-header justify-content-between border-0 p-0 mb-2">
<h3 class="mb-0">Opportunity Information</h3>
<button class="btn btn-sm btn-phoenix-secondary" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times text-danger"></span></button>
</div>
</div>
<div class="modal-body px-0">
<form method="post" class="form" action="{% url 'create_opportunity' opportunity.customer.pk %}">
<div class="row g-4">
<div class="col-lg-6">
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Owner</label>
<select class="form-select">
<option>Select</option>
<option>Ally Aagaard</option>
<option>Aida Moen</option>
<option>Niko Koss</option>
<option>Alec Haag</option>
<option>Lonnie Kub</option>
<option>Ola Smith</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Opportunity Name</label>
<input class="form-control" type="text" placeholder="Enter deal name" />
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-sm-6 col-lg-12 col-xl-6">
<label class="text-body-highlight fw-bold mb-2">Opportunity Amount</label>
<div class="row g-2">
<div class="col">
<input class="form-control" type="number" placeholder="$ Enter amount" />
</div>
<div class="modal fade" id="addOpportunityModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addOpportunityModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-body-highlight p-6">
<div class="modal-header justify-content-between border-0 p-0 mb-2">
<h3 class="mb-0">Opportunity Information</h3>
<button class="btn btn-sm btn-phoenix-secondary" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times text-danger"></span></button>
</div>
<div class="modal-body px-0">
<form method="post" class="form" action="{% url 'create_opportunity' opportunity.customer.pk %}">
<div class="row g-4">
<div class="col-lg-6">
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Owner</label>
<select class="form-select">
<option>Select</option>
<option>Ally Aagaard</option>
<option>Aida Moen</option>
<option>Niko Koss</option>
<option>Alec Haag</option>
<option>Lonnie Kub</option>
<option>Ola Smith</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Opportunity Name</label>
<input class="form-control" type="text" placeholder="Enter deal name" />
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-sm-6 col-lg-12 col-xl-6">
<label class="text-body-highlight fw-bold mb-2">Opportunity Amount</label>
<div class="row g-2">
<div class="col">
<input class="form-control" type="number" placeholder="$ Enter amount" />
</div>
<div class="col-auto">
<select class="form-select">
<option>USD</option>
<option>GBP</option>
<option>EUR</option>
<option>JPY</option>
<option>CAD</option>
<option>AUD</option>
<option>CNY</option>
<option>CHF</option>
<option>ZAR</option>
<option>BRL</option>
<option>RUB</option>
<option>INR</option>
<option>MXN</option>
<option>NZD</option>
<option>SGD</option>
<option>HKD</option>
<option>KRW</option>
<option>SEK</option>
<option>NOK</option>
<option>TRY</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-auto">
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Opportunity Code</label>
<input class="form-control" type="text" placeholder="Enter deals code" />
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Opportunity Type
<button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
</label>
<select class="form-select">
<option>Select</option>
<option>Buy One Get One Free</option>
<option>Clearance sale</option>
<option>Bundle deals</option>
<option>Free shipping</option>
<option>Loyalty programs</option>
<option>Limited-time offers</option>
<option>Refer-a-friend discounts</option>
<option>Seasonal sales</option>
<option>Membership discounts</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Category
<button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
</label>
<select class="form-select">
<option>Select</option>
<option>Financial</option>
<option>Marketplace</option>
<option>Travel</option>
<option>E-commerce</option>
<option>Cloud Computing</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Probability (%)</label>
<input class="form-control" type="text" placeholder="Enter value" />
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Expected Revenue</label>
<div class="row g-2">
<div class="col">
<input class="form-control" type="number" placeholder="$ Enter amount" />
</div>
<div class="col-auto">
<select class="form-select">
<option>USD</option>
<option>GBP</option>
<option>EUR</option>
<option>JPY</option>
<option>CAD</option>
<option>AUD</option>
<option>CNY</option>
<option>CHF</option>
<option>ZAR</option>
<option>BRL</option>
<option>RUB</option>
<option>INR</option>
<option>MXN</option>
<option>NZD</option>
<option>SGD</option>
<option>HKD</option>
<option>KRW</option>
<option>SEK</option>
<option>NOK</option>
<option>TRY</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Contact Name</label>
<input class="form-control" type="text" placeholder="Enter contact name" />
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Phone Number</label>
<input class="form-control" type="text" placeholder="Enter phone number" />
</div>
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Email Address</label>
<input class="form-control" type="text" placeholder="Enter email address" />
</div>
</div>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Lead Source
<button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
</label>
<select class="form-select">
<option>Select</option>
<option>Referrals</option>
<option>Former Clients</option>
<option>Competitors</option>
<option>Business & sales</option>
<option>Google resources</option>
<option>Linkedin</option>
<option>Marketing</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Campaign Source
<button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
</label>
<select class="form-select">
<option>Select</option>
<option>Online Campaign</option>
<option>Offline Campaign</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Time Zone</label>
<select class="form-select">
<option>GMT-12:00 Etc/GMT-12</option>
<option>GMT-11:00 Etc/GMT-11</option>
<option>GMT-11:00 Pacific/Midway</option>
<option>GMT-10:00 America/Adak</option>
<option>GMT-09:00 America/Anchorage</option>
<option>GMT-09:00 Pacific/Gambier</option>
<option>GMT-08:00 America/Dawson_Creek</option>
<option>GMT-08:00 America/Ensenada</option>
<option>GMT-08:00 America/Los_Angeles</option>
<option>GMT-07:00 America/Chihuahua</option>
<option>GMT-07:00 America/Denver</option>
<option>GMT-06:00 America/Belize</option>
<option>GMT-06:00 America/Cancun</option>
<option>GMT-06:00 America/Chicago</option>
<option>GMT-06:00 Chile/EasterIsland</option>
<option>GMT-05:00 America/Bogota</option>
<option>GMT-05:00 America/Havana</option>
<option>GMT-05:00 America/New_York</option>
<option>GMT-04:30 America/Caracas</option>
<option>GMT-04:00 America/Campo_Grande</option>
<option>GMT-04:00 America/Glace_Bay</option>
<option>GMT-04:00 America/Goose_Bay</option>
<option>GMT-04:00 America/Santiago</option>
<option>GMT-04:00 America/La_Paz</option>
<option>GMT-03:00 America/Argentina/Buenos_Aires</option>
<option>GMT-03:00 America/Montevideo</option>
<option>GMT-03:00 America/Araguaina</option>
<option>GMT-03:00 America/Godthab</option>
<option>GMT-03:00 America/Miquelon</option>
<option>GMT-03:00 America/Sao_Paulo</option>
<option>GMT-03:30 America/St_Johns</option>
<option>GMT-02:00 America/Noronha</option>
<option>GMT-01:00 Atlantic/Cape_Verde</option>
<option>GMT Europe/Belfast</option>
<option>GMT Africa/Abidjan</option>
<option>GMT Europe/Dublin</option>
<option>GMT Europe/Lisbon</option>
<option>GMT Europe/London</option>
<option>UTC UTC</option>
<option>GMT+01:00 Africa/Algiers</option>
<option>GMT+01:00 Africa/Windhoek</option>
<option>GMT+01:00 Atlantic/Azores</option>
<option>GMT+01:00 Atlantic/Stanley</option>
<option>GMT+01:00 Europe/Amsterdam</option>
<option>GMT+01:00 Europe/Belgrade</option>
<option>GMT+01:00 Europe/Brussels</option>
<option>GMT+02:00 Africa/Cairo</option>
<option>GMT+02:00 Africa/Blantyre</option>
<option>GMT+02:00 Asia/Beirut</option>
<option>GMT+02:00 Asia/Damascus</option>
<option>GMT+02:00 Asia/Gaza</option>
<option>GMT+02:00 Asia/Jerusalem</option>
<option>GMT+03:00 Africa/Addis_Ababa</option>
<option>GMT+03:00 Asia/Riyadh89</option>
<option>GMT+03:00 Europe/Minsk</option>
<option>GMT+03:30 Asia/Tehran</option>
<option>GMT+04:00 Asia/Dubai</option>
<option>GMT+04:00 Asia/Yerevan</option>
<option>GMT+04:00 Europe/Moscow</option>
<option>GMT+04:30 Asia/Kabul</option>
<option>GMT+05:00 Asia/Tashkent</option>
<option>GMT+05:30 Asia/Kolkata</option>
<option>GMT+05:45 Asia/Katmandu</option>
<option>GMT+06:00 Asia/Dhaka</option>
<option>GMT+06:00 Asia/Yekaterinburg</option>
<option>GMT+06:30 Asia/Rangoon</option>
<option>GMT+07:00 Asia/Bangkok</option>
<option>GMT+07:00 Asia/Novosibirsk</option>
<option>GMT+08:00 Etc/GMT+8</option>
<option>GMT+08:00 Asia/Hong_Kong</option>
<option>GMT+08:00 Asia/Krasnoyarsk</option>
<option>GMT+08:00 Australia/Perth</option>
<option>GMT+08:45 Australia/Eucla</option>
<option>GMT+09:00 Asia/Irkutsk</option>
<option>GMT+09:00 Asia/Seoul</option>
<option>GMT+09:00 Asia/Tokyo</option>
<option>GMT+09:30 Australia/Adelaide</option>
<option>GMT+09:30 Australia/Darwin</option>
<option>GMT+09:30 Pacific/Marquesas</option>
<option>GMT+10:00 Etc/GMT+10</option>
<option>GMT+10:00 Australia/Brisbane</option>
<option>GMT+10:00 Australia/Hobart</option>
<option>GMT+10:00 Asia/Yakutsk</option>
<option>GMT+10:30 Australia/Lord_Howe</option>
<option>GMT+11:00 Asia/Vladivostok</option>
<option>GMT+11:30 Pacific/Norfolk</option>
<option>GMT+12:00 Etc/GMT+12</option>
<option>GMT+12:00 Asia/Anadyr</option>
<option>GMT+12:00 Asia/Magadan</option>
<option>GMT+12:00 Pacific/Auckland</option>
<option>GMT+12:45 Pacific/Chatham</option>
<option>GMT+13:00 Pacific/Tongatapu</option>
<option>GMT+14:00 Pacific/Kiritimati</option>
</select>
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Create Date</label>
<input class="form-control datetimepicker" type="text" placeholder="dd / mm / yyyy" data-options='{"disableMobile":true}' />
</div>
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Start Time</label>
<input class="form-control datetimepicker" type="text" placeholder="H:i" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />
</div>
</div>
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Closing Date</label>
<input class="form-control datetimepicker" type="text" placeholder="dd / mm / yyyy" data-options='{"disableMobile":true}' />
</div>
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Closing Time</label>
<input class="form-control datetimepicker" type="text" placeholder="H:i" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />
</div>
</div>
</div>
<div class="row g-3">
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Stage</label>
<select class="form-select">
<option>USD</option>
<option>GBP</option>
<option>EUR</option>
<option>JPY</option>
<option>CAD</option>
<option>AUD</option>
<option>CNY</option>
<option>CHF</option>
<option>ZAR</option>
<option>BRL</option>
<option>RUB</option>
<option>INR</option>
<option>MXN</option>
<option>NZD</option>
<option>SGD</option>
<option>HKD</option>
<option>KRW</option>
<option>SEK</option>
<option>NOK</option>
<option>TRY</option>
<option>Select</option>
<option>New</option>
<option>In Progress</option>
<option>Pending</option>
<option>Canceled</option>
<option>Completed</option>
</select>
</div>
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Priority</label>
<select class="form-select">
<option>Urgent</option>
<option>High</option>
<option>Medium</option>
<option>Low</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Opportunity Code</label>
<input class="form-control" type="text" placeholder="Enter deals code" />
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Opportunity Type
<button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
</label>
<select class="form-select">
<option>Select</option>
<option>Buy One Get One Free</option>
<option>Clearance sale</option>
<option>Bundle deals</option>
<option>Free shipping</option>
<option>Loyalty programs</option>
<option>Limited-time offers</option>
<option>Refer-a-friend discounts</option>
<option>Seasonal sales</option>
<option>Membership discounts</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Category
<button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
</label>
<select class="form-select">
<option>Select</option>
<option>Financial</option>
<option>Marketplace</option>
<option>Travel</option>
<option>E-commerce</option>
<option>Cloud Computing</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Probability (%)</label>
<input class="form-control" type="text" placeholder="Enter value" />
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Expected Revenue</label>
<div class="row g-2">
<div class="col">
<input class="form-control" type="number" placeholder="$ Enter amount" />
</div>
<div class="col-auto">
<select class="form-select">
<option>USD</option>
<option>GBP</option>
<option>EUR</option>
<option>JPY</option>
<option>CAD</option>
<option>AUD</option>
<option>CNY</option>
<option>CHF</option>
<option>ZAR</option>
<option>BRL</option>
<option>RUB</option>
<option>INR</option>
<option>MXN</option>
<option>NZD</option>
<option>SGD</option>
<option>HKD</option>
<option>KRW</option>
<option>SEK</option>
<option>NOK</option>
<option>TRY</option>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="col-lg-6">
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Contact Name</label>
<input class="form-control" type="text" placeholder="Enter contact name" />
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Phone Number</label>
<input class="form-control" type="text" placeholder="Enter phone number" />
</div>
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Email Address</label>
<input class="form-control" type="text" placeholder="Enter email address" />
</div>
</div>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Lead Source
<button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
</label>
<select class="form-select">
<option>Select</option>
<option>Referrals</option>
<option>Former Clients</option>
<option>Competitors</option>
<option>Business & sales</option>
<option>Google resources</option>
<option>Linkedin</option>
<option>Marketing</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Campaign Source
<button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
</label>
<select class="form-select">
<option>Select</option>
<option>Online Campaign</option>
<option>Offline Campaign</option>
</select>
</div>
<div class="mb-4">
<label class="text-body-highlight fw-bold mb-2">Time Zone</label>
<select class="form-select">
<option>GMT-12:00 Etc/GMT-12</option>
<option>GMT-11:00 Etc/GMT-11</option>
<option>GMT-11:00 Pacific/Midway</option>
<option>GMT-10:00 America/Adak</option>
<option>GMT-09:00 America/Anchorage</option>
<option>GMT-09:00 Pacific/Gambier</option>
<option>GMT-08:00 America/Dawson_Creek</option>
<option>GMT-08:00 America/Ensenada</option>
<option>GMT-08:00 America/Los_Angeles</option>
<option>GMT-07:00 America/Chihuahua</option>
<option>GMT-07:00 America/Denver</option>
<option>GMT-06:00 America/Belize</option>
<option>GMT-06:00 America/Cancun</option>
<option>GMT-06:00 America/Chicago</option>
<option>GMT-06:00 Chile/EasterIsland</option>
<option>GMT-05:00 America/Bogota</option>
<option>GMT-05:00 America/Havana</option>
<option>GMT-05:00 America/New_York</option>
<option>GMT-04:30 America/Caracas</option>
<option>GMT-04:00 America/Campo_Grande</option>
<option>GMT-04:00 America/Glace_Bay</option>
<option>GMT-04:00 America/Goose_Bay</option>
<option>GMT-04:00 America/Santiago</option>
<option>GMT-04:00 America/La_Paz</option>
<option>GMT-03:00 America/Argentina/Buenos_Aires</option>
<option>GMT-03:00 America/Montevideo</option>
<option>GMT-03:00 America/Araguaina</option>
<option>GMT-03:00 America/Godthab</option>
<option>GMT-03:00 America/Miquelon</option>
<option>GMT-03:00 America/Sao_Paulo</option>
<option>GMT-03:30 America/St_Johns</option>
<option>GMT-02:00 America/Noronha</option>
<option>GMT-01:00 Atlantic/Cape_Verde</option>
<option>GMT Europe/Belfast</option>
<option>GMT Africa/Abidjan</option>
<option>GMT Europe/Dublin</option>
<option>GMT Europe/Lisbon</option>
<option>GMT Europe/London</option>
<option>UTC UTC</option>
<option>GMT+01:00 Africa/Algiers</option>
<option>GMT+01:00 Africa/Windhoek</option>
<option>GMT+01:00 Atlantic/Azores</option>
<option>GMT+01:00 Atlantic/Stanley</option>
<option>GMT+01:00 Europe/Amsterdam</option>
<option>GMT+01:00 Europe/Belgrade</option>
<option>GMT+01:00 Europe/Brussels</option>
<option>GMT+02:00 Africa/Cairo</option>
<option>GMT+02:00 Africa/Blantyre</option>
<option>GMT+02:00 Asia/Beirut</option>
<option>GMT+02:00 Asia/Damascus</option>
<option>GMT+02:00 Asia/Gaza</option>
<option>GMT+02:00 Asia/Jerusalem</option>
<option>GMT+03:00 Africa/Addis_Ababa</option>
<option>GMT+03:00 Asia/Riyadh89</option>
<option>GMT+03:00 Europe/Minsk</option>
<option>GMT+03:30 Asia/Tehran</option>
<option>GMT+04:00 Asia/Dubai</option>
<option>GMT+04:00 Asia/Yerevan</option>
<option>GMT+04:00 Europe/Moscow</option>
<option>GMT+04:30 Asia/Kabul</option>
<option>GMT+05:00 Asia/Tashkent</option>
<option>GMT+05:30 Asia/Kolkata</option>
<option>GMT+05:45 Asia/Katmandu</option>
<option>GMT+06:00 Asia/Dhaka</option>
<option>GMT+06:00 Asia/Yekaterinburg</option>
<option>GMT+06:30 Asia/Rangoon</option>
<option>GMT+07:00 Asia/Bangkok</option>
<option>GMT+07:00 Asia/Novosibirsk</option>
<option>GMT+08:00 Etc/GMT+8</option>
<option>GMT+08:00 Asia/Hong_Kong</option>
<option>GMT+08:00 Asia/Krasnoyarsk</option>
<option>GMT+08:00 Australia/Perth</option>
<option>GMT+08:45 Australia/Eucla</option>
<option>GMT+09:00 Asia/Irkutsk</option>
<option>GMT+09:00 Asia/Seoul</option>
<option>GMT+09:00 Asia/Tokyo</option>
<option>GMT+09:30 Australia/Adelaide</option>
<option>GMT+09:30 Australia/Darwin</option>
<option>GMT+09:30 Pacific/Marquesas</option>
<option>GMT+10:00 Etc/GMT+10</option>
<option>GMT+10:00 Australia/Brisbane</option>
<option>GMT+10:00 Australia/Hobart</option>
<option>GMT+10:00 Asia/Yakutsk</option>
<option>GMT+10:30 Australia/Lord_Howe</option>
<option>GMT+11:00 Asia/Vladivostok</option>
<option>GMT+11:30 Pacific/Norfolk</option>
<option>GMT+12:00 Etc/GMT+12</option>
<option>GMT+12:00 Asia/Anadyr</option>
<option>GMT+12:00 Asia/Magadan</option>
<option>GMT+12:00 Pacific/Auckland</option>
<option>GMT+12:45 Pacific/Chatham</option>
<option>GMT+13:00 Pacific/Tongatapu</option>
<option>GMT+14:00 Pacific/Kiritimati</option>
</select>
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Create Date</label>
<input class="form-control datetimepicker" type="text" placeholder="dd / mm / yyyy" data-options='{"disableMobile":true}' />
</div>
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Start Time</label>
<input class="form-control datetimepicker" type="text" placeholder="H:i" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />
</div>
</div>
</div>
<div class="mb-4">
<div class="row g-3">
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Closing Date</label>
<input class="form-control datetimepicker" type="text" placeholder="dd / mm / yyyy" data-options='{"disableMobile":true}' />
</div>
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Closing Time</label>
<input class="form-control datetimepicker" type="text" placeholder="H:i" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />
</div>
</div>
</div>
<div class="row g-3">
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Stage</label>
<select class="form-select">
<option>Select</option>
<option>New</option>
<option>In Progress</option>
<option>Pending</option>
<option>Canceled</option>
<option>Completed</option>
</select>
</div>
<div class="col-6">
<label class="text-body-highlight fw-bold mb-2">Priority</label>
<select class="form-select">
<option>Urgent</option>
<option>High</option>
<option>Medium</option>
<option>Low</option>
</select>
</div>
</div>
<div class="modal-footer border-0 pt-6 px-0 pb-0">
<button class="btn btn-link text-danger px-3 my-0" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
<button class="btn btn-primary my-0">Create Deal</button>
</div>
</div>
</form>
</div>
<div class="modal-footer border-0 pt-6 px-0 pb-0">
<button class="btn btn-link text-danger px-3 my-0" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
<button class="btn btn-primary my-0">Create Deal</button>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}

209
templates/crm/opportunities/opportunity_list.html
View File

@ -1,134 +1,93 @@
{% extends 'base.html' %}
{% load i18n static %}
{% load i18n static humanize %}
{% load custom_filters %}
{% block content %}
<div class="row g-3">
<div class="col-12">
<h2 class="mb-3">{{ _("Opportunities") }}</h2>
</div>
<div class="col-12">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
<!-- Filter Controls -->
<div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-3 w-100" id="filter-container">
<!-- Search Input - Wider and properly aligned -->
<div class="position-relative flex-grow-1" style="min-width: 300px;">
<span class="fas fa-search position-absolute top-50 translate-middle-y ms-3 text-body-tertiary"></span>
<input
class="form-control ps-6"
type="text"
placeholder="{% trans 'Search opportunities...' %}"
name="search"
hx-get="{% url 'opportunity_list' %}"
hx-trigger="keyup changed delay:500ms"
hx-target="#opportunities-grid"
hx-select="#opportunities-grid"
hx-include="#filter-container select"
hx-swap="outerHTML"
style="width: 100%;"
>
</div>
<!-- Filter Dropdowns - Aligned in a row -->
<div class="d-flex flex-column flex-sm-row gap-3 w-100" style="max-width: 500px;">
<!-- Stage Filter -->
<div class="flex-grow-1">
<select
class="form-select"
name="stage"
hx-get="{% url 'opportunity_list' %}"
hx-trigger="change"
hx-target="#opportunities-grid"
hx-select="#opportunities-grid"
hx-swap="outerHTML"
hx-include="#filter-container input, #filter-container select"
>
<option value="">{% trans "All Stages" %}</option>
{% for value, label in stage_choices %}
<option value="{{ value }}" {% if request.GET.stage == value %}selected{% endif %}>
{{ label }}
</option>
{% endfor %}
</select>
</div>
<div class="row g-3">
<h2 class="mb-5">{{ _("Opportunities") }}</h2>
<div class="d-xl-flex justify-content-between">
<div class="mb-3">
<a class="btn btn-sm btn-phoenix-primary me-4" href="{% url 'opportunity_create' %}"><span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}</a>
</div>
<!-- Sort Filter -->
<div class="flex-grow-1">
<select
class="form-select"
name="sort"
hx-get="{% url 'opportunity_list' %}"
hx-trigger="change"
hx-target="#opportunities-grid"
hx-select="#opportunities-grid"
hx-swap="outerHTML"
hx-include="#filter-container input, #filter-container select"
>
<option value="newest" {% if request.GET.sort == 'newest' %}selected{% endif %}>
{% trans "Newest First" %}
</option>
<option value="highest" {% if request.GET.sort == 'highest' %}selected{% endif %}>
{% trans "Highest Value" %}
</option>
<option value="closing" {% if request.GET.sort == 'closing' %}selected{% endif %}>
{% trans "Earliest Close Date" %}
</option>
</select>
</div>
</div>
<div>
<div class="px-4 px-lg-6 ">
<div class="deals-items-container">
<div class="deals scrollbar">
<div class="deals-col me-4">
<div class="w-100 min-vh-50">
{% for opportunity in opportunities %}
<div class="card mb-3">
<div class="card-body">
<h5 class="mb-2 ms-4">{{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h5>
<a class="dropdown-indicator-icon position-absolute text-body-tertiary text-end"
href="#collapseWidthDeals-{{ opportunity.pk }}"
role="button"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="collapseWidthDeals-{{ opportunity.pk }}">
<span class="fa-solid fa-angle-down text-end"></span>
</a>
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="d-flex gap-3">
</div>
<div class="d-flex">
<span class="me-2" data-feather="clock" style="stroke-width:2;"></span>
<p class="mb-0 fs-9 fw-semibold text-body-tertiary date">{{ opportunity.created|date }}<span class="text-body-quaternary"> . {{ opportunity.created|time}}</span></p>
</div>
</div>
<div class="deals-items-head d-flex align-items-center mb-2">
<a class="text-primary fw-bold line-clamp-1 me-3 mb-0 fs-9" href="{% url 'opportunity_detail' opportunity.pk %}">{{ _("View") }}</a>
<p class="fs-10 mb-0 mt-1 d-none"><span class="me-1 text-body-quaternary" data-feather="grid" style="stroke-width:2; height: 12px; width: 12px"></span>{{ opportunity.get_stage_display }}</p>
<p class="ms-auto fs-9 text-body-emphasis fw-semibold mb-0 deals-revenue">{{ opportunity.car.finances.total }}</p>
</div>
<div class="deals-company-agent d-flex flex-between-center">
<div class="d-flex align-items-center"><span class="uil uil-user me-2"></span>
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.customer.get_full_name }}</p>
</div>
<div class="d-flex align-items-center"><span class="uil uil-headphones me-2"></span>
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.staff.name }}</p>
</div>
</div>
<div class="collapse" id="collapseWidthDeals-{{ opportunity.pk }}">
<div class="d-flex gap-2 mb-5"><span class="badge badge-phoenix fs-10 badge-phoenix-info">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{ opportunity.get_status_display }}</span></div>
<table class="mb-4 w-100 table-stats table-stats">
<tr>
<th>{{ _("Details") }}</th>
<th>:</th>
<th></th>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="dollar-sign"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
</div>
</td>
<td class="d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="ps-6 ps-sm-0 fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.car.finances.total }}</p>
</td>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="user" style="width:16px; height:16px"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Contact") }}</p>
</div>
</td>
<td class=" d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis d-flex align-items-center gap-2"><a href=""> <span class="fa-solid fa-square-phone text-body-tertiary"></span></a><a href=""> <span class="fa-solid fa-square-envelope text-body-tertiary"></span></a><a href=""> <span class="fab fa-whatsapp-square text-body-tertiary"></span></a></p>
</td>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="calendar" style="width:16px; height:16px"></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
</div>
</td>
<td class=" d-none d-sm-block pe-sm-2">:</td>
<td class="py-1">
<p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.closing_date }}</p>
</td>
</tr>
</table>
<p class="fs-9 mb-1 fw-bold"> {{ _("Probability") }}: %</p>
<div class="progress" style="height:16px">
{% if opportunity.probability >= 25 and opportunity.probability < 49 %}
<div class="progress-bar rounded-pill bg-danger-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
</div>
{% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
<div class="progress-bar rounded-pill bg-warning-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
</div>
{% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
<div class="progress-bar rounded-pill bg-success-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
</div>
<div class="d-flex justify-content-end">
<a class="btn btn-phoenix-primary btn-sm" href="{% url 'opportunity_create' %}">
<span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}
</a>
</div>
</div>
</div>
</div>
<div id="opportunities-grid" class="row g-4 px-2 px-lg-4 mt-1">
{% include 'crm/opportunities/partials/opportunity_grid.html' %}
</div>
{% endblock %}

62
templates/crm/opportunities/opportunity_logs.html
View File

@ -1,35 +1,35 @@
{% extends 'base.html' %}
{% block content %}
<h1>Logs for {{ opportunity.deal_name }}</h1>
<div class="table-list" id="opportunityTable">
</div>
<table>
<thead>
<tr>
<th>Action</th>
<th>User</th>
<th>Old Status</th>
<th>New Status</th>
<th>Details</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{% for log in logs %}
<tr>
<td>{{ log.get_action_display }}</td>
<td>{{ log.user }}</td>
<td>{{ log.get_old_status_display }}</td>
<td>{{ log.get_new_status_display }}</td>
<td>{{ log.details }}</td>
<td>{{ log.created_at }}</td>
</tr>
{% empty %}
<tr>
<td colspan="6">No logs found.</td>
</tr>
{% endfor %}
</tbody>
</table>
<h1>Logs for {{ opportunity.deal_name }}</h1>
<div class="table-list" id="opportunityTable">
</div>
<table>
<thead>
<tr>
<th>Action</th>
<th>User</th>
<th>Old Status</th>
<th>New Status</th>
<th>Details</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{% for log in logs %}
<tr>
<td>{{ log.get_action_display }}</td>
<td>{{ log.user }}</td>
<td>{{ log.get_old_status_display }}</td>
<td>{{ log.get_new_status_display }}</td>
<td>{{ log.details }}</td>
<td>{{ log.created_at }}</td>
</tr>
{% empty %}
<tr>
<td colspan="6">No logs found.</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

109
templates/crm/opportunities/partials/opportunity_grid.html Normal file
View File

@ -0,0 +1,109 @@
{% load i18n static humanize %}
{% load custom_filters %}
{% block customCSS %}
<style>
.bg-success-soft {
background-color: rgba(25, 135, 84, 0.1) !important;
opacity: .8;
}
.bg-danger-soft {
background-color: rgba(220, 53, 69, 0.1) !important;
opacity: .8;
}
</style>
{% endblock customCSS %}
{% for opportunity in opportunities %}
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
<div class="card h-100
{% if opportunity.get_stage_display == 'Closed Won' %}bg-success-soft
{% elif opportunity.get_stage_display == 'Closed Lost' %}bg-danger-soft{% endif %}">
<div class="card-body">
<h5 class="mb-4">Opportunity for {{ opportunity.customer.customer_name }}</h5>
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="d-flex gap-2">
{% if opportunity.get_stage_display == "Negotiation" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-primary">{{ opportunity.get_stage_display }}</span>
{% elif opportunity.get_stage_display == "Discovery" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-info">{{ opportunity.get_stage_display }}</span>
{% elif opportunity.get_stage_display == "Proposal" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-warning">{{ opportunity.get_stage_display }}</span>
{% elif opportunity.get_stage_display == "Closed Won" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-success">{{ opportunity.get_stage_display }}</span>
{% elif opportunity.get_stage_display == "Closed Lost" %}
<span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{ opportunity.get_stage_display }}</span>
{% endif %}
<span class="badge badge-phoenix fs-10
{% if opportunity.get_stage_display == 'Won' %}badge-phoenix-success
{% elif opportunity.get_stage_display == 'Lost' %}badge-phoenix-danger{% endif %}">
{{ opportunity.get_status_display }}
</span>
</div>
<div class="d-flex align-items-center">
<i class="fa-regular fa-clock"></i>&nbsp;
<p class="mb-0 fs-9 fw-semibold text-body-tertiary">{{ opportunity.created|naturalday|capfirst }}</p>
</div>
</div>
<div class="deals-company-agent d-flex justify-content-between mb-3">
<div class="d-flex align-items-center">
<span class="uil uil-user me-2"></span>
<p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.staff.name }}</p>
</div>
</div>
<table class="mb-3 w-100">
<tr>
<td class="py-1">
<div class="d-flex align-items-center">
<span class="me-2 text-body-tertiary"><span class="currency">{{ CURRENCY }}</span></span>
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
</div>
</td>
<td class="text-end">
<p class="fw-semibold fs-9 mb-0 text-body-emphasis"><span class="currency">{{ CURRENCY }}</span>{{ opportunity.expected_revenue }}</p>
</td>
</tr>
<tr>
<td class="py-1">
<div class="d-flex align-items-center">
<i class="uil uil-calendar-alt"></i>&nbsp;
<p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
</div>
</td>
<td class="text-end">
<p class="fw-semibold fs-9 mb-0 text-body-emphasis">{{ opportunity.closing_date|naturalday|capfirst }}</p>
</td>
</tr>
</table>
<p class="fs-9 mb-1 fw-bold">{{ _("Probability") }}: {{ opportunity.probability }}%</p>
<div class="progress mb-3" style="height:16px">
{% if opportunity.probability >= 25 and opportunity.probability < 49 %}
<div class="progress-bar rounded-pill bg-danger-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
</div>
{% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
<div class="progress-bar rounded-pill bg-warning-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
</div>
{% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
<div class="progress-bar rounded-pill bg-success-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
<span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
</div>
{% endif %}
</div>
<div class="d-flex gap-2">
<a class="btn btn-sm btn-phoenix-primary" href="{% url 'opportunity_detail' opportunity.pk %}">
{{ _("View Details") }} <i class="fa-solid fa-eye ms-2"></i>
</a>
<a class="btn btn-sm btn-phoenix-success" href="{% url 'update_opportunity' opportunity.pk %}">
{{ _("Update") }} <i class="fa-solid fa-pen ms-2"></i>
</a>
</div>
</div>
</div>
</div>
{% endfor %}

58
templates/customers/customer_form.html
View File

@ -5,37 +5,37 @@
{% block content %}
<link rel="stylesheet" href="{% static 'flags/sprite.css' %}">
<div class="row">
<div class="row mb-3">
<div class="col-sm-6 col-md-8">
<div class="d-sm-flex justify-content-between">
<h3 class="mb-3">
{% if customer.created %}
<i class="fa-solid fa-user"></i> {{ _("Edit Customer") }}
{% else %}
<i class="fa-solid fa-user"></i> {{ _("Add Customer") }}
{% endif %}
</h3>
<link rel="stylesheet" href="{% static 'flags/sprite.css' %}">
<div class="row">
<div class="row mb-3">
<div class="col-sm-6 col-md-8">
<div class="d-sm-flex justify-content-between">
<h3 class="mb-3">
{% if customer.created %}
<i class="fa-solid fa-user"></i> {{ _("Edit Customer") }}
{% else %}
<i class="fa-solid fa-user"></i> {{ _("Add Customer") }}
{% endif %}
</h3>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-6 col-md-8">
<form method="post" class="form row g-3 needs-validation" enctype="multipart/form-data" novalidate>
{% csrf_token %}
{{ form|crispy }}
<div class="col-12">
<button class="btn btn-phoenix-primary" type="submit">
<i class="fa-solid fa-floppy-disk"></i> {% trans "Save" %}
</button>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-phoenix-secondary">
<i class="fa-solid fa-ban"></i> {{ _("Cancel") }}
</a>
</div>
</form>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-6 col-md-8">
<form method="post" class="form row g-3 needs-validation" enctype="multipart/form-data" novalidate>
{% csrf_token %}
{{ form|crispy }}
<div class="col-12">
<button class="btn btn-phoenix-primary" type="submit">
<i class="fa-solid fa-floppy-disk"></i> {% trans "Save" %}
</button>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-phoenix-secondary">
<i class="fa-solid fa-ban"></i> {{ _("Cancel") }}
</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

210
templates/customers/customer_list.html
View File

@ -5,112 +5,112 @@
{% block vendors %}<a class="nav-link active">{{ _("Customers")|capfirst }}</a>{% endblock %}
{% block content %}
<div class="row">
<h4 class="mb-4">{{ _("Customers")|capfirst }}</h4>
<div class="row g-3 justify-content-between mb-4">
<div class="col-auto">
<div class="d-md-flex justify-content-between">
{% if perms.django_ledger.add_customermodel %}
<div>
<a href="{% url 'customer_create' %}" class="btn btn-sm btn-phoenix-primary me-4"><span class="fas fa-plus me-2"></span>{{ _("Add Customer") }}</a>
</div>
{% endif %}
</div>
</div>
<div class="col-auto">
<div class="d-flex">
{% include 'partials/search_box.html' %}
</div>
</div>
<div class="row">
<h4 class="mb-4">{{ _("Customers")|capfirst }}</h4>
<div class="row g-3 justify-content-between mb-4">
<div class="col-auto">
<div class="d-md-flex justify-content-between">
{% if perms.django_ledger.add_customermodel %}
<div>
<a href="{% url 'customer_create' %}" class="btn btn-sm btn-phoenix-primary me-4"><span class="fas fa-plus me-2"></span>{{ _("Add Customer") }}</a>
</div>
{% if page_obj.object_list %}
<div class="table-responsive scrollbar transition">
<table class="table table-sm fs-9 mb-0 border-translucent">
<thead>
<tr>
<th></th>
<th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" data-sort="name" style="width:25%;">{{ _("Name")|capfirst }}</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="email" style="width:15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><span class="text-success-dark" data-feather="mail"></span></div><span>{{ _("email")|capfirst }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="phone" style="width:15%; min-width: 180px;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="text-primary-dark" data-feather="phone"></span></div><span>{{ _("Phone Number") }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="contact" style="width:15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="user"></span></div><span>{{ _("National ID")|capfirst }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="company" style="width:15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div><span>{{ _("Address")|capfirst }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="company" style="width:15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div><span>{{ _("Active")|capfirst }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" data-sort="date" style="width:15%;">
{{ _("Create date") }}</th>
<th class="sort text-end align-middle pe-0 ps-4" scope="col"></th>
</tr>
</thead>
<tbody class="list" id="lead-tables-body">
{% for customer in customers %}
<!-- Delete Modal -->
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td>
</td>
<td class="name align-middle white-space-nowrap ps-0">
<div class="d-flex align-items-center">
<div><a class="fs-8 fw-bold" href="{% url 'customer_detail' customer.pk %}">{{ customer.full_name }}</a>
<div class="d-flex align-items-center">
</div>
</div>
</div>
</td>
<td class="email align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent"><a class="text-body-highlight" href="">{{ customer.email }}</a></td>
<td class="phone align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent"><a class="text-body-highlight" href="tel:{{ customer.phone }}">{{ customer.phone_number }}</a></td>
<td class="contact align-middle white-space-nowrap ps-4 border-end border-translucent fw-semibold text-body-highlight">{{ customer.national_id }}</td>
<td class="company align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 border-end border-translucent fw-semibold text-body-highlight">
{{ customer.address }}</td>
<td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">
{% if customer.active %}
<span class="badge badge-phoenix badge-phoenix-success"><i class="fas fa-check"></i> {{customer.active}}</span>
{% else %}
<span class="badge badge-phoenix badge-phoenix-danger"><i class="fas fa-times"></i> {{customer.active}}</span>
{% endif %}
</td>
<td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">{{ customer.created|date }}</td>
<td class="align-middle white-space-nowrap text-end pe-0 ps-4">
{% if perms.django_ledger.change_customermodel %}
<a href="{% url 'customer_update' customer.pk %}" class="btn btn-sm btn-phoenix-primary me-2" data-url="{% url 'customer_update' customer.pk %}">
<i class="fas fa-pen"></i>
</a>
{% endif %}
{% if perms.django_ledger.delete_customermodel %}
<button class="btn btn-phoenix-danger btn-sm delete-btn"
data-url="{% url 'customer_delete' customer.pk %}"
data-message="{{ _("Are you sure you want to delete this customer")}}"
data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class="fas fa-trash"></i>
</button>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
{% include 'partials/pagination.html' %}
{% endif %}
</div>
</div>
<div class="col-auto">
<div class="d-flex">
{% include 'partials/search_box.html' %}
</div>
</div>
</div>
{% if page_obj.object_list %}
<div class="table-responsive scrollbar transition">
<table class="table table-sm fs-9 mb-0 border-translucent">
<thead>
<tr>
<th></th>
<th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" data-sort="name" style="width:25%;">{{ _("Name")|capfirst }}</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="email" style="width:15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><span class="text-success-dark" data-feather="mail"></span></div><span>{{ _("email")|capfirst }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="phone" style="width:15%; min-width: 180px;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="text-primary-dark" data-feather="phone"></span></div><span>{{ _("Phone Number") }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="contact" style="width:15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="user"></span></div><span>{{ _("National ID")|capfirst }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="company" style="width:15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div><span>{{ _("Address")|capfirst }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="company" style="width:15%;">
<div class="d-inline-flex flex-center">
<div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div><span>{{ _("Active")|capfirst }}</span>
</div>
</th>
<th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" data-sort="date" style="width:15%;">
{{ _("Create date") }}</th>
<th class="sort text-end align-middle pe-0 ps-4" scope="col"></th>
</tr>
</thead>
<tbody class="list" id="lead-tables-body">
{% for customer in customers %}
<!-- Delete Modal -->
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td>
</td>
<td class="name align-middle white-space-nowrap ps-0">
<div class="d-flex align-items-center">
<div><a class="fs-8 fw-bold" href="{% url 'customer_detail' customer.pk %}">{{ customer.full_name }}</a>
<div class="d-flex align-items-center">
</div>
</div>
</div>
</td>
<td class="email align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent"><a class="text-body-highlight" href="">{{ customer.email }}</a></td>
<td class="phone align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent"><a class="text-body-highlight" href="tel:{{ customer.phone }}">{{ customer.phone_number }}</a></td>
<td class="contact align-middle white-space-nowrap ps-4 border-end border-translucent fw-semibold text-body-highlight">{{ customer.national_id }}</td>
<td class="company align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 border-end border-translucent fw-semibold text-body-highlight">
{{ customer.address }}</td>
<td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">
{% if customer.active %}
<span class="badge badge-phoenix badge-phoenix-success"><i class="fas fa-check"></i> {{customer.active}}</span>
{% else %}
<span class="badge badge-phoenix badge-phoenix-danger"><i class="fas fa-times"></i> {{customer.active}}</span>
{% endif %}
</td>
<td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">{{ customer.created|date }}</td>
<td class="align-middle white-space-nowrap text-end pe-0 ps-4">
{% if perms.django_ledger.change_customermodel %}
<a href="{% url 'customer_update' customer.pk %}" class="btn btn-sm btn-phoenix-primary me-2" data-url="{% url 'customer_update' customer.pk %}">
<i class="fas fa-pen"></i>
</a>
{% endif %}
{% if perms.django_ledger.delete_customermodel %}
<button class="btn btn-phoenix-danger btn-sm delete-btn"
data-url="{% url 'customer_delete' customer.pk %}"
data-message="{{ _("Are you sure you want to delete this customer")}}"
data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class="fas fa-trash"></i>
</button>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
{% include 'partials/pagination.html' %}
</div>
{% include 'modal/delete_modal.html' %}
{% endblock %}

370
templates/customers/view_customer.html
View File

@ -4,222 +4,222 @@
{% block title %}{{ _("View Customer") }}{% endblock title %}
{% block content %}
{% include 'modal/delete_modal.html' %}
{% include 'modal/delete_modal.html' %}
<div class="row">
<div class="mb-9">
<div class="row align-items-center justify-content-between g-3 mb-4">
<div class="row">
<div class="mb-9">
<div class="row align-items-center justify-content-between g-3 mb-4">
<div class="col-auto">
<h3 class="mb-0">{% trans 'Customer details' %}</h3>
</div>
<div class="col-auto">
<div class="row g-3">
<div class="col-auto">
<h3 class="mb-0">{% trans 'Customer details' %}</h3>
{% if perms.django_ledger.delete_customermodel %}
<button class="btn btn-phoenix-danger btn-sm delete-btn"
data-url="{% url 'customer_delete' customer.pk %}"
data-message="Are you sure you want to delete this customer?"
data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class="fas fa-trash me-1"> </i>{{ _("Delete") }}
</button>
{% endif %}
</div>
<div class="col-auto">
<div class="row g-3">
<div class="col-auto">
{% if perms.django_ledger.delete_customermodel %}
<button class="btn btn-phoenix-danger btn-sm delete-btn"
data-url="{% url 'customer_delete' customer.pk %}"
data-message="Are you sure you want to delete this customer?"
data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class="fas fa-trash me-1"> </i>{{ _("Delete") }}
</button>
{% endif %}
</div>
<div class="col-auto">
{% if perms.django_ledger.change_customermodel %}
<a href="{% url 'customer_update' customer.pk %}" class="btn btn-sm btn-phoenix-warning"><span class="fa-solid fa-pen-to-square me-2"></span>{{_("Update")}}</a>
{% endif %}
</div>
</div>
<div class="col-auto">
{% if perms.django_ledger.change_customermodel %}
<a href="{% url 'customer_update' customer.pk %}" class="btn btn-sm btn-phoenix-warning"><span class="fa-solid fa-pen-to-square me-2"></span>{{_("Update")}}</a>
{% endif %}
</div>
</div>
<div class="row g-5">
<div class="col-12 col-xxl-4">
<div class="row g-3 h-100">
<div class="col-12 col-md-7 col-xxl-12">
<div class="card h-100 h-xxl-auto">
<div class="card-body d-flex flex-column justify-content-between pb-3">
<div class="row align-items-center g-5 mb-3 text-center text-sm-start">
<div class="col-12 col-sm-auto mb-sm-2">
<div class="avatar avatar-5xl"><img class="rounded-circle" src="{{ customer.image.url }}" alt="" /></div>
</div>
<div class="col-12 col-sm-auto flex-1">
<h3>{{ customer.full_name }}</h3>
<p class="text-body-secondary">{{ customer.created|timesince}}</p>
</div>
</div>
<div class="d-flex justify-content-between border-top border-dashed pt-4">
<div>
<h6>{% trans 'Invoices' %}</h6>
<p class="fs-7 text-body-secondary mb-0">{{invoices.count}}</p>
</div>
<div>
<h6>{% trans 'Quotations' %}</h6>
<p class="fs-7 text-body-secondary mb-0">{{estimates.count}}</p>
</div>
</div>
</div>
</div>
<div class="row g-5">
<div class="col-12 col-xxl-4">
<div class="row g-3 h-100">
<div class="col-12 col-md-7 col-xxl-12">
<div class="card h-100 h-xxl-auto">
<div class="card-body d-flex flex-column justify-content-between pb-3">
<div class="row align-items-center g-5 mb-3 text-center text-sm-start">
<div class="col-12 col-sm-auto mb-sm-2">
<div class="avatar avatar-5xl"><img class="rounded-circle" src="{{ customer.image.url }}" alt="" /></div>
</div>
<div class="col-12 col-sm-auto flex-1">
<h3>{{ customer.full_name }}</h3>
<p class="text-body-secondary">{{ customer.created|timesince}}</p>
</div>
</div>
</div>
<div class="col-12 col-md-5 col-xxl-12">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<h3 class="me-1">{% trans 'Default Address' %}</h3>
<button class="btn btn-link p-0"><span class="fas fa-pen fs-8 ms-3 text-body-quaternary"></span></button>
</div>
<h5 class="text-body-secondary">{{ _("Address") }}</h5>
<p class="text-body-secondary">{{ customer.address}}</p>
<div class="mb-3">
<h5 class="text-body-secondary">{% trans 'Email' %}</h5><a href="{{ customer.email}}">{{ customer.email }}</a>
</div>
<h5 class="text-body-secondary">{% trans 'Phone Number' %}</h5><a class="text-body-secondary" href="#">{{ customer.phone_number }}</a>
<div class="d-flex justify-content-between border-top border-dashed pt-4">
<div>
<h6>{% trans 'Invoices' %}</h6>
<p class="fs-7 text-body-secondary mb-0">{{invoices.count}}</p>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-end">
<a id="addBtn" href="#" class="btn btn-sm btn-phoenix-primary mb-3" data-url="{% url 'add_note_to_customer' customer.pk %}" data-bs-toggle="modal" data-bs-target="#noteModal" data-note-title="{{ _("Add") }}<i class='fa fa-plus-circle text-success ms-2'></i>">
<span class="fas fa-plus me-1"></span>
{% trans 'Add Note' %}
</a>
</div>
<table class="table fs-9 mb-0 table-responsive">
<tr>
<th class="align-middle pe-6 text-start" scope="col">{{ _("Note") }}</th>
<th class="align-middle pe-6 text-start" scope="col">{{ _("Date") }}</th>
</tr>
<tbody>
{% for note in customer_notes %}
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="align-middle text-start fw-bold text-body-tertiary ps-1">{{note.note}}</td>
<td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div>
<h6>{% trans 'Quotations' %}</h6>
<p class="fs-7 text-body-secondary mb-0">{{estimates.count}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-8">
<div class="mb-6">
<h3 class="mb-4">{{ _("Related") }} <span class="text-body-tertiary fw-normal">({{ total }})</span></h3>
<div class="border-top border-bottom border-translucent" id="customerOrdersTable" data-list='{"valueNames":["order","total","payment_status","fulfilment_status","delivery_type","date"],"page":6,"pagination":true}'>
<div class="table-responsive scrollbar">
<table class="table table-sm fs-9 mb-0">
<thead>
<tr>
<th class="sort white-space-nowrap align-middle ps-0 pe-3" scope="col" data-sort="order">{% trans 'Type'|upper %}</th>
<th class="sort align-middle text-end pe-7" scope="col" data-sort="total">{% trans 'Total'|upper %}</th>
<th class="sort align-middle white-space-nowrap pe-3" scope="col" data-sort="payment_status">{% trans 'Payment Status'|upper %}</th>
<th class="sort align-middle text-end pe-0" scope="col" data-sort="date">{% trans 'Date'|upper %}</th>
<th class="sort text-end align-middle pe-0 ps-5" scope="col"></th>
</tr>
</thead>
<tbody class="list" id="customer-order-table-body">
{% for estimate in estimates %}
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="order align-middle white-space-nowrap ps-0">
<p class="fw-semibold mb-0" >{{ _("Quotation") }}-<span class="fs-10 fw-medium">{{ estimate.estimate_number }}</span></p>
</td>
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">{{ estimate.revenue_estimate|currency_format }} <span class="currency"> {{ CURRENCY }}</span> </td>
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
</td>
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ estimate.created }}</td>
<td class="align-middle white-space-nowrap text-end pe-0 ps-5">
<div class="btn-reveal-trigger position-static">
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
{% endfor %}
{% for invoice in invoices %}
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="order align-middle white-space-nowrap ps-0">
<p class="fw-semibold mb-0" >{{ _("Invoice") }}-<span class="fs-10 fw-medium">{{ invoice.invoice_number }}</span></p>
</td>
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">{{ invoice.amount_paid|currency_format }}<span class="currency"> {{ CURRENCY }}</span> </td>
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
{% if invoice.is_paid %}
<span class="badge badge-phoenix fs-10 badge-phoenix-success">
<span class="badge-label">{{ _("Paid") }}</span>
<span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span>
</span>
{% endif %}
</td>
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ invoice.created }}</td>
<td class="align-middle white-space-nowrap text-end pe-0 ps-5">
<div class="btn-reveal-trigger position-static">
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="col-12 col-md-5 col-xxl-12">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<h3 class="me-1">{% trans 'Default Address' %}</h3>
<button class="btn btn-link p-0"><span class="fas fa-pen fs-8 ms-3 text-body-quaternary"></span></button>
</div>
{% include 'partials/pagination.html' %}
<h5 class="text-body-secondary">{{ _("Address") }}</h5>
<p class="text-body-secondary">{{ customer.address}}</p>
<div class="mb-3">
<h5 class="text-body-secondary">{% trans 'Email' %}</h5><a href="{{ customer.email}}">{{ customer.email }}</a>
</div>
<h5 class="text-body-secondary">{% trans 'Phone Number' %}</h5><a class="text-body-secondary" href="#">{{ customer.phone_number }}</a>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-end">
<a id="addBtn" href="#" class="btn btn-sm btn-phoenix-primary mb-3" data-url="{% url 'add_note_to_customer' customer.pk %}" data-bs-toggle="modal" data-bs-target="#noteModal" data-note-title="{{ _("Add") }}<i class='fa fa-plus-circle text-success ms-2'></i>">
<span class="fas fa-plus me-1"></span>
{% trans 'Add Note' %}
</a>
</div>
<table class="table fs-9 mb-0 table-responsive">
<tr>
<th class="align-middle pe-6 text-start" scope="col">{{ _("Note") }}</th>
<th class="align-middle pe-6 text-start" scope="col">{{ _("Date") }}</th>
</tr>
<tbody>
{% for note in customer_notes %}
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="align-middle text-start fw-bold text-body-tertiary ps-1">{{note.note}}</td>
<td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
<h4 class="modal-title" id="noteModalLabel">{% trans 'Notes' %}</h4>
<button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
<span class="fas fa-times"></span>
</button>
<div class="col-12 col-xxl-8">
<div class="mb-6">
<h3 class="mb-4">{{ _("Related") }} <span class="text-body-tertiary fw-normal">({{ total }})</span></h3>
<div class="border-top border-bottom border-translucent" id="customerOrdersTable" data-list='{"valueNames":["order","total","payment_status","fulfilment_status","delivery_type","date"],"page":6,"pagination":true}'>
<div class="table-responsive scrollbar">
<table class="table table-sm fs-9 mb-0">
<thead>
<tr>
<th class="sort white-space-nowrap align-middle ps-0 pe-3" scope="col" data-sort="order">{% trans 'Type'|upper %}</th>
<th class="sort align-middle text-end pe-7" scope="col" data-sort="total">{% trans 'Total'|upper %}</th>
<th class="sort align-middle white-space-nowrap pe-3" scope="col" data-sort="payment_status">{% trans 'Payment Status'|upper %}</th>
<th class="sort align-middle text-end pe-0" scope="col" data-sort="date">{% trans 'Date'|upper %}</th>
<th class="sort text-end align-middle pe-0 ps-5" scope="col"></th>
</tr>
</thead>
<tbody class="list" id="customer-order-table-body">
{% for estimate in estimates %}
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="order align-middle white-space-nowrap ps-0">
<p class="fw-semibold mb-0" >{{ _("Quotation") }}-<span class="fs-10 fw-medium">{{ estimate.estimate_number }}</span></p>
</td>
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">{{ estimate.revenue_estimate|currency_format }} <span class="currency"> {{ CURRENCY }}</span> </td>
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
</td>
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ estimate.created }}</td>
<td class="align-middle white-space-nowrap text-end pe-0 ps-5">
<div class="btn-reveal-trigger position-static">
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
{% endfor %}
{% for invoice in invoices %}
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="order align-middle white-space-nowrap ps-0">
<p class="fw-semibold mb-0" >{{ _("Invoice") }}-<span class="fs-10 fw-medium">{{ invoice.invoice_number }}</span></p>
</td>
<td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">{{ invoice.amount_paid|currency_format }}<span class="currency"> {{ CURRENCY }}</span> </td>
<td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
{% if invoice.is_paid %}
<span class="badge badge-phoenix fs-10 badge-phoenix-success">
<span class="badge-label">{{ _("Paid") }}</span>
<span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span>
</span>
{% endif %}
</td>
<td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ invoice.created }}</td>
<td class="align-middle white-space-nowrap text-end pe-0 ps-5">
<div class="btn-reveal-trigger position-static">
<button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% include 'partials/pagination.html' %}
</div>
</div>
</div>
</div>
<div class="modal-body">
</div>
<div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
<h4 class="modal-title" id="noteModalLabel">{% trans 'Notes' %}</h4>
<button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
<span class="fas fa-times"></span>
</button>
</div>
<div class="modal-body">
<!-- Content will be loaded here via AJAX -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const noteModal = document.getElementById("noteModal");
const modalTitle = document.getElementById("noteModalLabel");
<script>
document.addEventListener("DOMContentLoaded", function () {
const noteModal = document.getElementById("noteModal");
const modalTitle = document.getElementById("noteModalLabel");
const modalBody = noteModal.querySelector(".modal-body");
const modalBody = noteModal.querySelector(".modal-body");
noteModal.addEventListener("show.bs.modal", function (event) {
noteModal.addEventListener("show.bs.modal", function (event) {
const button = event.relatedTarget;
const url = button.getAttribute("data-url");
const title = button.getAttribute("data-note-title");
fetch(url)
.then((response) => response.text())
.then((html) => {
modalBody.innerHTML = html;
modalTitle.innerHTML = title;
})
.catch((error) => {
modalBody.innerHTML = '<p class="text-danger">{% trans 'Error loading form. Please try again later' %}.</p>';
console.error("Error loading form:", error);
});
.then((response) => response.text())
.then((html) => {
modalBody.innerHTML = html;
modalTitle.innerHTML = title;
})
.catch((error) => {
modalBody.innerHTML = '<p class="text-danger">{% trans 'Error loading form. Please try again later' %}.</p>';
console.error("Error loading form:", error);
});
});
});
});
</script>
</script>
{% endblock %}

576
templates/dashboards/crm.html
View File

@ -5,309 +5,309 @@
{% block content %}
<div class="content">
<div class="row gy-3 mb-4 justify-content-between">
<div class="col-xxl-6">
<h2 class="mb-2 text-body-emphasis">CRM Dashboard</h2>
<h5 class="text-body-tertiary fw-semibold mb-4">Check your business growth in one place</h5>
<div class="row g-3 mb-3">
<div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4">
<div class="card h-100">
<div class="card-body">
<div class="d-flex d-sm-block justify-content-between">
<div class="border-bottom-sm border-translucent mb-sm-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center icon-wrapper-sm shadow-primary-100" style="transform: rotate(-7.45deg);"><span class="fa-solid fa-phone-alt text-primary fs-7 z-1 ms-2"></span></div>
<p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing call</p>
</div>
<p class="text-primary mt-2 fs-6 fw-bold mb-0 mb-sm-4">3 <span class="fs-8 text-body lh-lg">Leads Today</span></p>
</div>
<div class="d-flex flex-column justify-content-center flex-between-end d-sm-block text-end text-sm-start"><span class="badge badge-phoenix badge-phoenix-success fs-10 mb-2">+24.5%</span>
<p class="mb-0 fs-9 text-body-tertiary">Than Yesterday</p>
</div>
<div class="content">
<div class="row gy-3 mb-4 justify-content-between">
<div class="col-xxl-6">
<h2 class="mb-2 text-body-emphasis">CRM Dashboard</h2>
<h5 class="text-body-tertiary fw-semibold mb-4">Check your business growth in one place</h5>
<div class="row g-3 mb-3">
<div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4">
<div class="card h-100">
<div class="card-body">
<div class="d-flex d-sm-block justify-content-between">
<div class="border-bottom-sm border-translucent mb-sm-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center icon-wrapper-sm shadow-primary-100" style="transform: rotate(-7.45deg);"><span class="fa-solid fa-phone-alt text-primary fs-7 z-1 ms-2"></span></div>
<p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing call</p>
</div>
<p class="text-primary mt-2 fs-6 fw-bold mb-0 mb-sm-4">3 <span class="fs-8 text-body lh-lg">Leads Today</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4">
<div class="card h-100">
<div class="card-body">
<div class="d-flex d-sm-block justify-content-between">
<div class="border-bottom-sm border-translucent mb-sm-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center icon-wrapper-sm shadow-info-100" style="transform: rotate(-7.45deg);"><span class="fa-solid fa-calendar text-info fs-7 z-1 ms-2"></span></div>
<p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing meeting</p>
</div>
<p class="text-info mt-2 fs-6 fw-bold mb-0 mb-sm-4">12 <span class="fs-8 text-body lh-lg">This Week</span></p>
</div>
<div class="d-flex flex-column justify-content-center flex-between-end d-sm-block text-end text-sm-start"><span class="badge badge-phoenix badge-phoenix-warning fs-10 mb-2">+24.5%</span>
<p class="mb-0 fs-9 text-body-tertiary">Than last week</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xl-6 col-xxl-4 gy-5 gy-md-3">
<div class="border-bottom border-translucent">
<h5 class="pb-4 border-bottom border-translucent">Top 5 Lead Sources</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"> <span class="fw-bold">1. </span>None </span><span>(65)</span></div>
</li>
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal mx-1"><span class="fw-bold">2. </span>Online Store</span><span>(74)</span></div>
</li>
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"><span class="fw-bold">3.</span> Advertisement</span><span>(32)</span></div>
</li>
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"><span class="fw-bold">4.</span> Seminar Partner</span><span>(25)</span></div>
</li>
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"> <span class="fw-bold">5.</span> Partner</span><span>(23)</span></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xxl-6 mb-6">
<h3>Contacts Created</h3>
<p class="text-body-tertiary mb-1">Payment received across all channels</p>
<div class="echart-contacts-created" style="min-height:270px; width:100%"></div>
</div>
<div class="col-12 col-xxl-6 mb-3 mb-sm-0">
<div class="row">
<div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
<h3>New Contacts by Source</h3>
<p class="text-body-tertiary">Payment received across all channels</p>
<div class="row g-0">
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Organic</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">80</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Paid Search</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">65</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-info" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Direct</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">40</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-info-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Social</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">220</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger-lighter" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Referrals</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">120</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Others</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">35</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
<div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-contact-by-source-row mt-sm-7 mt-lg-4 mt-xl-0">
<div class="echart-contact-by-source" style="min-height:245px;width:100%"></div>
<div class="position-absolute rounded-circle bg-primary-subtle top-50 start-50 translate-middle d-flex flex-center" style="height:100px; width:100px;">
<h3 class="mb-0 text-primary-dark fw-bolder" data-label="data-label"></h3>
<div class="d-flex flex-column justify-content-center flex-between-end d-sm-block text-end text-sm-start"><span class="badge badge-phoenix badge-phoenix-success fs-10 mb-2">+24.5%</span>
<p class="mb-0 fs-9 text-body-tertiary">Than Yesterday</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-6 mb-8">
<div class="mb-3">
<h3>New Users &amp; Leads</h3>
<p class="text-body-tertiary mb-0">Payment received across all channels</p>
</div>
<div class="row g-6">
<div class="col-md-6 mb-2 mb-sm-0">
<div class="d-flex align-items-center"><span class="me-2 text-info" data-feather="users" style="min-height:24px; width:24px"></span>
<h4 class="text-body-tertiary mb-0">New Users :<span class="text-body-emphasis"> 42</span></h4><span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2"><span class="badge-label d-inline-block lh-base">+24.5%</span><span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span></span>
</div>
<div class="pb-0 pt-4">
<div class="echarts-new-users" style="min-height:110px;width:100%;"></div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center"><span class="me-2 text-primary" data-feather="zap" style="height:24px; width:24px"></span>
<h4 class="text-body-tertiary mb-0">New Leads :<span class="text-body-emphasis"> 45</span></h4><span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2"><span class="badge-label d-inline-block lh-base">+30.5%</span><span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span></span>
</div>
<div class="pb-0 pt-4">
<div class="echarts-new-leads" style="min-height:110px;width:100%;"></div>
<div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4">
<div class="card h-100">
<div class="card-body">
<div class="d-flex d-sm-block justify-content-between">
<div class="border-bottom-sm border-translucent mb-sm-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center icon-wrapper-sm shadow-info-100" style="transform: rotate(-7.45deg);"><span class="fa-solid fa-calendar text-info fs-7 z-1 ms-2"></span></div>
<p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing meeting</p>
</div>
<p class="text-info mt-2 fs-6 fw-bold mb-0 mb-sm-4">12 <span class="fs-8 text-body lh-lg">This Week</span></p>
</div>
<div class="d-flex flex-column justify-content-center flex-between-end d-sm-block text-end text-sm-start"><span class="badge badge-phoenix badge-phoenix-warning fs-10 mb-2">+24.5%</span>
<p class="mb-0 fs-9 text-body-tertiary">Than last week</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-6">
<div class="row align-items-start justify-content-between mb-4 g-3">
<div class="col-auto">
<h3>Ad Clicks</h3>
<p class="text-body-tertiary lh-sm mb-0">Check effectiveness of your ads</p>
</div>
<div class="col-12 col-sm-4">
<select class="form-select form-select-sm" id="select-ad-clicks-month">
<option>Mar 1 - 31, 2022</option>
<option>April 1 - 30, 2022</option>
<option>May 1 - 31, 2022</option>
</select>
</div>
</div>
<div class="echart-add-clicks-chart" style="min-height:385px;width:100%"></div>
</div>
<div class="col-12 col-xxl-6 mb-6 gy-0 gy-xxl-3">
<div class="row align-items-start justify-content-between mb-4 g-3">
<div class="col-auto">
<h3>Deal Forecast<span class="fw-semibold">- $90,303</span></h3>
<p class="text-body-tertiary mb-1">Show what you offer here</p>
</div>
<div class="col-12 col-sm-4">
<select class="form-select form-select-sm" id="select-ad-forcast-month">
<option>Mar 1 - 31, 2022</option>
<option>April 1 - 30, 2022</option>
<option>May 1 - 31, 2022</option>
</select>
</div>
</div>
<div class="w-100">
<div class="d-flex flex-start">
<p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 20.72%">$21.0k</p>
<p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 35.76%">$3.4k</p>
<p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 25.38%">$15.1k</p>
<p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 25.14%">$4.6k</p>
</div>
<div class="progress mb-3 rounded-3" style="height: 10px;">
<div class="progress-bar border-end border-2 bg-primary-dark" role="progressbar" style="width: 20.72%" aria-valuenow="20.72" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Appointment"></div>
<div class="progress-bar border-end border-2" role="progressbar" style="width: 35.76%" aria-valuenow="35.76" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Qualified"></div>
<div class="progress-bar bg-success border-end border-2" role="progressbar" style="width: 25.38%" aria-valuenow="25.38" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Closed Won"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 25.14%" aria-valuenow="25.14" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Contact Sent"></div>
</div>
</div>
<h4 class="mt-4 mb-3">Deal Forecast by Owner </h4>
<div class="border-top border-bottom-0" id="dealForecastTable" data-list='{"valueNames":["contact","appointment","qualified","closed-won","contact-sent"],"page":5}'>
<div class="table-responsive scrollbar">
<table class="table fs-9 mb-0">
<thead>
<tr>
<th class="sort border-end border-translucent white-space-nowrap align-middle ps-0 text-uppercase text-body-tertiary" scope="col" data-sort="contact" style="width:15%; min-width:100px">Contact</th>
<th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="appointment" style="width:15%; min-width:95px">
<div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-primary me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Appointment</span></div>
</th>
<th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="qualified" style="width:20%; min-width:100px">
<div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-primary-light me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Qualified</span></div>
</th>
<th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="closed-won" style="width:20%; min-width:100px">
<div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-success me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Closed Won</span></div>
</th>
<th class="sort align-middle text-end ps-3 text-uppercase text-body-tertiary" scope="col" data-sort="contact-sent" style="width:20%; min-width:100px">
<div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-info me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Contact Sent</span></div>
</th>
</tr>
</thead>
<tbody class="list" id="table-deal-forecast-body">
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Carrie Anne</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1000</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1256</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1200</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$1200</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Milind Mikuja</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">558</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$2531</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$2200</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$2200</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Stanley Drinkwater</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1100</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$100</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$100</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$100</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Josef Stravinsky</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">856</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$326</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$265</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$265</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Roy Anderson</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1200</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1452</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$865</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$865</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Oscar Wilde</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1020</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$950</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1000</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$800</td>
</tr>
</tbody>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3"> </td>
<td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">4,744</td>
<td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">$5,665</td>
<td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">$4630</td>
<td class="border-bottom-0 align-middle white-space-nowrap text-end fw-bold text-body-emphasis pt-2 pb-0 ps-3">$4630</td>
</tr>
</table>
</div>
<div class="col-md-4 col-xl-6 col-xxl-4 gy-5 gy-md-3">
<div class="border-bottom border-translucent">
<h5 class="pb-4 border-bottom border-translucent">Top 5 Lead Sources</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"> <span class="fw-bold">1. </span>None </span><span>(65)</span></div>
</li>
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal mx-1"><span class="fw-bold">2. </span>Online Store</span><span>(74)</span></div>
</li>
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"><span class="fw-bold">3.</span> Advertisement</span><span>(32)</span></div>
</li>
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"><span class="fw-bold">4.</span> Seminar Partner</span><span>(25)</span></div>
</li>
<li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
<div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"> <span class="fw-bold">5.</span> Partner</span><span>(23)</span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="mx-lg-n4">
<div class="row g-3 mb-9 mt-n7">
<div class="col-xl-5">
<div class="card h-100">
<div class="card-body">
<h3>Lead Conversion</h3>
<p class="text-body-tertiary mb-0">Stages of deals &amp; conversion</p>
<div class="echart-lead-conversion" style="min-height: 250px;"></div>
</div>
</div>
</div>
<div class="col-xl-7">
<div class="card h-100">
<div class="card-body">
<h3>Revenue Target</h3>
<p class="text-body-tertiary">Country-wise target fulfilment</p>
<div class="echart-revenue-target-conversion" style="min-height: 230px;"></div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer position-absolute">
<div class="row g-0 justify-content-between align-items-center h-100">
<div class="col-12 col-sm-auto text-center">
<p class="mb-0 mt-2 mt-sm-0 text-body">Thank you for creating with Phoenix<span class="d-none d-sm-inline-block"></span><span class="d-none d-sm-inline-block mx-1">|</span><br class="d-sm-none" />2024 &copy;<a class="mx-1" href="https://themewagon.com">Themewagon</a></p>
</div>
<div class="col-12 col-sm-auto text-center">
<p class="mb-0 text-body-tertiary text-opacity-85">v1.20.1</p>
</div>
</div>
</footer>
</div>
<div class="col-xxl-6 mb-6">
<h3>Contacts Created</h3>
<p class="text-body-tertiary mb-1">Payment received across all channels</p>
<div class="echart-contacts-created" style="min-height:270px; width:100%"></div>
</div>
<div class="col-12 col-xxl-6 mb-3 mb-sm-0">
<div class="row">
<div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
<h3>New Contacts by Source</h3>
<p class="text-body-tertiary">Payment received across all channels</p>
<div class="row g-0">
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Organic</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">80</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Paid Search</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">65</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-info" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Direct</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">40</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-info-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Social</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">220</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger-lighter" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Referrals</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">120</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Others</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">35</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
<div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-contact-by-source-row mt-sm-7 mt-lg-4 mt-xl-0">
<div class="echart-contact-by-source" style="min-height:245px;width:100%"></div>
<div class="position-absolute rounded-circle bg-primary-subtle top-50 start-50 translate-middle d-flex flex-center" style="height:100px; width:100px;">
<h3 class="mb-0 text-primary-dark fw-bolder" data-label="data-label"></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-6 mb-8">
<div class="mb-3">
<h3>New Users &amp; Leads</h3>
<p class="text-body-tertiary mb-0">Payment received across all channels</p>
</div>
<div class="row g-6">
<div class="col-md-6 mb-2 mb-sm-0">
<div class="d-flex align-items-center"><span class="me-2 text-info" data-feather="users" style="min-height:24px; width:24px"></span>
<h4 class="text-body-tertiary mb-0">New Users :<span class="text-body-emphasis"> 42</span></h4><span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2"><span class="badge-label d-inline-block lh-base">+24.5%</span><span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span></span>
</div>
<div class="pb-0 pt-4">
<div class="echarts-new-users" style="min-height:110px;width:100%;"></div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center"><span class="me-2 text-primary" data-feather="zap" style="height:24px; width:24px"></span>
<h4 class="text-body-tertiary mb-0">New Leads :<span class="text-body-emphasis"> 45</span></h4><span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2"><span class="badge-label d-inline-block lh-base">+30.5%</span><span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span></span>
</div>
<div class="pb-0 pt-4">
<div class="echarts-new-leads" style="min-height:110px;width:100%;"></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-6">
<div class="row align-items-start justify-content-between mb-4 g-3">
<div class="col-auto">
<h3>Ad Clicks</h3>
<p class="text-body-tertiary lh-sm mb-0">Check effectiveness of your ads</p>
</div>
<div class="col-12 col-sm-4">
<select class="form-select form-select-sm" id="select-ad-clicks-month">
<option>Mar 1 - 31, 2022</option>
<option>April 1 - 30, 2022</option>
<option>May 1 - 31, 2022</option>
</select>
</div>
</div>
<div class="echart-add-clicks-chart" style="min-height:385px;width:100%"></div>
</div>
<div class="col-12 col-xxl-6 mb-6 gy-0 gy-xxl-3">
<div class="row align-items-start justify-content-between mb-4 g-3">
<div class="col-auto">
<h3>Deal Forecast<span class="fw-semibold">- $90,303</span></h3>
<p class="text-body-tertiary mb-1">Show what you offer here</p>
</div>
<div class="col-12 col-sm-4">
<select class="form-select form-select-sm" id="select-ad-forcast-month">
<option>Mar 1 - 31, 2022</option>
<option>April 1 - 30, 2022</option>
<option>May 1 - 31, 2022</option>
</select>
</div>
</div>
<div class="w-100">
<div class="d-flex flex-start">
<p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 20.72%">$21.0k</p>
<p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 35.76%">$3.4k</p>
<p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 25.38%">$15.1k</p>
<p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 25.14%">$4.6k</p>
</div>
<div class="progress mb-3 rounded-3" style="height: 10px;">
<div class="progress-bar border-end border-2 bg-primary-dark" role="progressbar" style="width: 20.72%" aria-valuenow="20.72" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Appointment"></div>
<div class="progress-bar border-end border-2" role="progressbar" style="width: 35.76%" aria-valuenow="35.76" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Qualified"></div>
<div class="progress-bar bg-success border-end border-2" role="progressbar" style="width: 25.38%" aria-valuenow="25.38" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Closed Won"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 25.14%" aria-valuenow="25.14" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Contact Sent"></div>
</div>
</div>
<h4 class="mt-4 mb-3">Deal Forecast by Owner </h4>
<div class="border-top border-bottom-0" id="dealForecastTable" data-list='{"valueNames":["contact","appointment","qualified","closed-won","contact-sent"],"page":5}'>
<div class="table-responsive scrollbar">
<table class="table fs-9 mb-0">
<thead>
<tr>
<th class="sort border-end border-translucent white-space-nowrap align-middle ps-0 text-uppercase text-body-tertiary" scope="col" data-sort="contact" style="width:15%; min-width:100px">Contact</th>
<th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="appointment" style="width:15%; min-width:95px">
<div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-primary me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Appointment</span></div>
</th>
<th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="qualified" style="width:20%; min-width:100px">
<div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-primary-light me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Qualified</span></div>
</th>
<th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="closed-won" style="width:20%; min-width:100px">
<div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-success me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Closed Won</span></div>
</th>
<th class="sort align-middle text-end ps-3 text-uppercase text-body-tertiary" scope="col" data-sort="contact-sent" style="width:20%; min-width:100px">
<div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-info me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Contact Sent</span></div>
</th>
</tr>
</thead>
<tbody class="list" id="table-deal-forecast-body">
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Carrie Anne</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1000</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1256</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1200</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$1200</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Milind Mikuja</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">558</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$2531</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$2200</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$2200</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Stanley Drinkwater</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1100</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$100</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$100</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$100</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Josef Stravinsky</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">856</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$326</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$265</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$265</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Roy Anderson</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1200</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1452</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$865</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$865</td>
</tr>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Oscar Wilde</a></td>
<td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1020</td>
<td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$950</td>
<td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1000</td>
<td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$800</td>
</tr>
</tbody>
<tr class="hover-actions-trigger btn-reveal-trigger position-static">
<td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3"> </td>
<td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">4,744</td>
<td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">$5,665</td>
<td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">$4630</td>
<td class="border-bottom-0 align-middle white-space-nowrap text-end fw-bold text-body-emphasis pt-2 pb-0 ps-3">$4630</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="mx-lg-n4">
<div class="row g-3 mb-9 mt-n7">
<div class="col-xl-5">
<div class="card h-100">
<div class="card-body">
<h3>Lead Conversion</h3>
<p class="text-body-tertiary mb-0">Stages of deals &amp; conversion</p>
<div class="echart-lead-conversion" style="min-height: 250px;"></div>
</div>
</div>
</div>
<div class="col-xl-7">
<div class="card h-100">
<div class="card-body">
<h3>Revenue Target</h3>
<p class="text-body-tertiary">Country-wise target fulfilment</p>
<div class="echart-revenue-target-conversion" style="min-height: 230px;"></div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer position-absolute">
<div class="row g-0 justify-content-between align-items-center h-100">
<div class="col-12 col-sm-auto text-center">
<p class="mb-0 mt-2 mt-sm-0 text-body">Thank you for creating with Phoenix<span class="d-none d-sm-inline-block"></span><span class="d-none d-sm-inline-block mx-1">|</span><br class="d-sm-none" />2024 &copy;<a class="mx-1" href="https://themewagon.com">Themewagon</a></p>
</div>
<div class="col-12 col-sm-auto text-center">
<p class="mb-0 text-body-tertiary text-opacity-85">v1.20.1</p>
</div>
</div>
</footer>
</div>
{% endblock %}

536
templates/dashboards/manager.html
View File

@ -1,305 +1,305 @@
{% load i18n static custom_filters django_ledger%}
{% block content %}
<div class="row justify-content-between mb-2">
<h3 class="fs-4 fs-md-4 fs-xl-4 fw-black mb-4">
<span class="text-gradient-info me-3">{{ dealer.get_local_name }}</span>
</h3>
<div class="row justify-content-between mb-2">
<h3 class="fs-4 fs-md-4 fs-xl-4 fw-black mb-4">
<span class="text-gradient-info me-3">{{ dealer.get_local_name }}</span>
</h3>
<p><span class="badge badge-phoenix badge-phoenix-success me-2 fs-10">
<span class="fs-10 text-body-secondary me-1">{{ _("As of")}}</span>{% now "SHORT_DATETIME_FORMAT" %}
</span></p>
</div>
<div class="row justify-content-between mb-2">
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-users-alt text-success"></span>
<a href="{% url 'user_list' %}"><h4 class="fs-6 pt-3">{{ staff }}</h4></a>
<p class="fs-9 mb-0">{{ _("Staff")}}</p>
</div>
<div class="row justify-content-between mb-2">
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-users-alt text-success"></span>
<a href="{% url 'user_list' %}"><h4 class="fs-6 pt-3">{{ staff }}</h4></a>
<p class="fs-9 mb-0">{{ _("Staff")}}</p>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-bolt-alt text-primary"></span>
<a href="{% url 'lead_list' %}"><h4 class="fs-6 pt-3">{{ total_leads }}</h4></a>
<p class="fs-9 mb-0">{{ _("Leads")}}</p>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-user-plus text-warning"></span>
<a href="{% url 'customer_list' %}"><h4 class="fs-6 pt-3">{{ customers }}</h4></a>
<p class="fs-9 mb-0">{{ _("Customers")}}</p>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-bill text-info"></span>
<a href="{% url 'invoice_list' %}"><h4 class="fs-6 pt-3">{{ invoices }}</h4></a>
<p class="fs-9 mb-0">{{ _("Invoices")}}</p>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-comment-alt-question text-success-dark"></span>
<a href="{% url 'estimate_list' %}"><h4 class="fs-6 pt-3">{{ estimates }}</h4></a>
<p class="fs-9 mb-0">{{ _("Quotations")}}</p>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-receipt-alt text-secondary"></span>
<a href="{% url 'order_list_view' %}"><h4 class="fs-6 pt-3">{{ purchase_orders }}</h4></a>
<p class="fs-9 mb-0">{{ _("Purchase Orders")}}</p>
</div>
</div>
<div class="row g-3 pe-xxl-3 my-3">
<div class="col-12 col-xl-6 col-xxl-12">
<div class="row">
<div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
<h4 class="text-body mb-4">{% trans 'inventory'|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div id="car-chart-by-make" class="order-sm-0 order-md-1" style="height:64px;width: 128px;"></div>
<div class="mt-4 mt-md-0">
<h1 class="text-body-highlight">{{ total_cars }} <span class="fs-6 text-body-highlight">{{ _("Car") }}</span></h1>
</div>
</div>
</div>
<div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
<h4 class="text-body mb-4">{% trans 'inventory value'|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div class="d-md-flex align-items-center gap-2">
<span class="fas fa-money-check-alt fs-5 text-success-light dark__text-opacity-75"></span>
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
<h4 class="text-body-highlight mb-0"></h4>
</div>
</div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">{{ total_selling_price|currency_format }} <span class="currency"> {{ CURRENCY }}</span></h3>
</div>
</div>
</div>
<div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl py-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
<h4 class="text-body mb-4">{% trans "Profits"|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div class="d-md-flex align-items-center gap-2">
<span class="fa-solid fa-money-bill-trend-up fs-5 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
<h4 class="text-body-highlight mb-0"></h4>
</div>
</div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">{{ total_profit|currency_format }}<span class="currency"> {{ CURRENCY }}</span></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-bolt-alt text-primary"></span>
<a href="{% url 'lead_list' %}"><h4 class="fs-6 pt-3">{{ total_leads }}</h4></a>
<p class="fs-9 mb-0">{{ _("Leads")}}</p>
</div>
<div class="row justify-content-between">
<div class="col-12 col-lg-12">
<div class="row">
<div class="card mb-3">
<div class="bg-holder" style="background-image:url({% static 'images/bg/38.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="card-body d-flex justify-content-between position-relative">
<div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
<h3 class="mb-3">{{ _("Inventory by Status")}}</h3>
<div class="row g-0">
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ available_cars }}</h3>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-user-plus text-warning"></span>
<a href="{% url 'customer_list' %}"><h4 class="fs-6 pt-3">{{ customers }}</h4></a>
<p class="fs-9 mb-0">{{ _("Customers")}}</p>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-bill text-info"></span>
<a href="{% url 'invoice_list' %}"><h4 class="fs-6 pt-3">{{ invoices }}</h4></a>
<p class="fs-9 mb-0">{{ _("Invoices")}}</p>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-comment-alt-question text-success-dark"></span>
<a href="{% url 'estimate_list' %}"><h4 class="fs-6 pt-3">{{ estimates }}</h4></a>
<p class="fs-9 mb-0">{{ _("Quotations")}}</p>
</div>
<div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
<span class="uil fs-5 lh-1 uil-receipt-alt text-secondary"></span>
<a href="{% url 'order_list_view' %}"><h4 class="fs-6 pt-3">{{ purchase_orders }}</h4></a>
<p class="fs-9 mb-0">{{ _("Purchase Orders")}}</p>
</div>
</div>
<div class="row g-3 pe-xxl-3 my-3">
<div class="col-12 col-xl-6 col-xxl-12">
<div class="row">
<div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
<h4 class="text-body mb-4">{% trans 'inventory'|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div id="car-chart-by-make" class="order-sm-0 order-md-1" style="height:64px;width: 128px;"></div>
<div class="mt-4 mt-md-0">
<h1 class="text-body-highlight">{{ total_cars }} <span class="fs-6 text-body-highlight">{{ _("Car") }}</span></h1>
</div>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold")}}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ sold_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ reserved_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ transfer_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ hold_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-secondary-dark" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ damaged_cars }}</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
<div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-cars-by-status-container mt-sm-7 mt-lg-4 mt-xl-0">
<div id="echart-cars-by-status" class="mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0" style="min-height:245px;width:100%"></div>
<div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
<h4 class="text-body mb-4">{% trans 'inventory value'|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div class="d-md-flex align-items-center gap-2">
<span class="fas fa-money-check-alt fs-5 text-success-light dark__text-opacity-75"></span>
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
<h4 class="text-body-highlight mb-0"></h4>
</div>
</div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">{{ total_selling_price|currency_format }} <span class="currency"> {{ CURRENCY }}</span></h3>
</div>
</div>
</div>
<div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl py-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
<h4 class="text-body mb-4">{% trans "Profits"|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div class="d-md-flex align-items-center gap-2">
<span class="fa-solid fa-money-bill-trend-up fs-5 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
<h4 class="text-body-highlight mb-0"></h4>
</div>
</div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">{{ total_profit|currency_format }}<span class="currency"> {{ CURRENCY }}</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-between">
<div class="col-12 col-lg-12">
<div class="row">
<div class="card mb-3">
<div class="bg-holder" style="background-image:url({% static 'images/bg/38.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="card-body d-flex justify-content-between position-relative">
<div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
<h3 class="mb-3">{{ _("Inventory by Status")}}</h3>
<div class="row g-0">
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ available_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold")}}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ sold_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ reserved_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ transfer_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ hold_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-secondary-dark" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ damaged_cars }}</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
<div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-cars-by-status-container mt-sm-7 mt-lg-4 mt-xl-0">
<div id="echart-cars-by-status" class="mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0" style="min-height:245px;width:100%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
/* Car Chart By Make */
const { getColor, rgbaColor } = window.phoenix.utils;
const handleTooltipPosition = ([pos, , dom, , size]) => {
const { getColor, rgbaColor } = window.phoenix.utils;
const handleTooltipPosition = ([pos, , dom, , size]) => {
// only for mobile device
if (window.innerWidth <= 540) {
const tooltipHeight = dom.offsetHeight;
const obj = {top: pos[1] - tooltipHeight - 20};
obj[pos[0] < size.viewSize[0] / 2 ? 'left' : 'right'] = 5;
return obj;
}
return null; // else default behaviour
};
if (window.innerWidth <= 540) {
const tooltipHeight = dom.offsetHeight;
const obj = {top: pos[1] - tooltipHeight - 20};
obj[pos[0] < size.viewSize[0] / 2 ? 'left' : 'right'] = 5;
return obj;
}
return null; // else default behaviour
};
const carData = {{ car|safe }}
const carNames = carData.map(item => item.id_car_make__name);
const carCounts = carData.map(item => item.count);
const carData = {{ car|safe }}
const carNames = carData.map(item => item.id_car_make__name);
const carCounts = carData.map(item => item.count);
const car_chart = echarts.init(document.getElementById('car-chart-by-make'));
option = {
color: getColor("danger"),
tooltip: {
trigger: 'axis',
position: (...params) => handleTooltipPosition(params),
padding: [7, 10],
axisPointer: {
type: 'none'
},
},
extraCssText: 'z-index: 1000',
responsive: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: carNames,
axisLine: {
show: true,
lineStyle: {color: getColor('secondary-bg')}
const car_chart = echarts.init(document.getElementById('car-chart-by-make'));
option = {
color: getColor("danger"),
tooltip: {
trigger: 'axis',
position: (...params) => handleTooltipPosition(params),
padding: [7, 10],
axisPointer: {
type: 'none'
},
},
axisTick: {
show: false
},
}
],
yAxis: [
{
show: false,
type: 'value',
}
],
series: [
{
type: 'bar',
barWidth: 3,
backgroundStyle: {
borderRadius: [0.5, 0.5, 0, 0],
},
data: carCounts
},
],
grid: {
bottom: 0,
top: 0,
left: 10,
right: 10,
containLabel: false
}
};
extraCssText: 'z-index: 1000',
responsive: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: carNames,
axisLine: {
show: true,
lineStyle: {color: getColor('secondary-bg')}
},
axisTick: {
show: false
},
}
],
yAxis: [
{
show: false,
type: 'value',
}
],
series: [
{
type: 'bar',
barWidth: 3,
backgroundStyle: {
borderRadius: [0.5, 0.5, 0, 0],
},
data: carCounts
},
],
grid: {
bottom: 0,
top: 0,
left: 10,
right: 10,
containLabel: false
}
};
car_chart.setOption(option);
car_chart.setOption(option);
/* Car Status Chart */
const car_status = echarts.init(document.getElementById('echart-cars-by-status'));
const data = [
{value: {{available_cars}}, name: '{{ _("Available") }}'},
{value: {{sold_cars}}, name: '{{ _("Sold")}}'},
{value: {{reserved_cars}}, name: '{{ _("Reserved") }}'},
{value: {{transfer_cars}}, name: '{{ _("Transfer") }}'},
{value: {{hold_cars}}, name: '{{ _("Hold") }}'},
{value: {{damaged_cars}}, name: '{{ _("Damaged") }}'}
];
const car_status = echarts.init(document.getElementById('echart-cars-by-status'));
const data = [
{value: {{available_cars}}, name: '{{ _("Available") }}'},
{value: {{sold_cars}}, name: '{{ _("Sold")}}'},
{value: {{reserved_cars}}, name: '{{ _("Reserved") }}'},
{value: {{transfer_cars}}, name: '{{ _("Transfer") }}'},
{value: {{hold_cars}}, name: '{{ _("Hold") }}'},
{value: {{damaged_cars}}, name: '{{ _("Damaged") }}'}
];
option = {
color: [
rgbaColor(getColor('success'),0.7),
rgbaColor(getColor('warning'),0.7),
rgbaColor(getColor('danger'),0.7),
rgbaColor(getColor('primary'),0.7),
rgbaColor(getColor('warning-light'),0.7),
rgbaColor(getColor('secondary-light'),0.7),
],
tooltip: {
trigger: 'item',
padding: [7, 10],
backgroundColor: getColor('body-highlight-bg'),
borderColor: getColor('body-bg'),
textStyle: {color: getColor('light-text-emphasis')},
borderWidth: 1,
transitionDuration: 0,
extraCssText: 'z-index: 1000'
},
responsive: true,
maintainAspectRatio: false,
series: [
{
name: '',
type: 'pie',
radius: ['55%', '90%'],
startAngle: 90,
avoidLabelOverlap: false,
itemStyle: {
option = {
color: [
rgbaColor(getColor('success'),0.7),
rgbaColor(getColor('warning'),0.7),
rgbaColor(getColor('danger'),0.7),
rgbaColor(getColor('primary'),0.7),
rgbaColor(getColor('warning-light'),0.7),
rgbaColor(getColor('secondary-light'),0.7),
],
tooltip: {
trigger: 'item',
padding: [7, 10],
backgroundColor: getColor('body-highlight-bg'),
borderColor: getColor('body-bg'),
borderWidth: 3
textStyle: {color: getColor('light-text-emphasis')},
borderWidth: 1,
transitionDuration: 0,
extraCssText: 'z-index: 1000'
},
responsive: true,
maintainAspectRatio: false,
label: {
show: false
},
emphasis: {
label: {
show: false
series: [
{
name: '',
type: 'pie',
radius: ['55%', '90%'],
startAngle: 90,
avoidLabelOverlap: false,
itemStyle: {
borderColor: getColor('body-bg'),
borderWidth: 3
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
labelLine: {
show: false
},
data
}
},
labelLine: {
show: false
},
data
}
],
grid: {
bottom: 0,
top: 0,
left: 0,
right: 0,
containLabel: false
}
};
car_status.setOption(option);
],
grid: {
bottom: 0,
top: 0,
left: 0,
right: 0,
containLabel: false
}
};
car_status.setOption(option);
});
</script>
});
</script>
{% endblock %}

696
templates/dashboards/sales.html
View File

@ -2,240 +2,241 @@
{% block content %}
<div class="row justify-content-between">
<div class="col-12 col-lg-6">
<div class="row g-2">
<h3 class="fs-4 fs-md-4 fs-xl-4 fw-black mb-4">
<div class="row justify-content-between">
<div class="col-12 col-lg-6">
<div class="row g-2">
<h3 class="fs-4 fs-md-4 fs-xl-4 fw-black mb-4">
<span class="text-gradient-info me-3">{{ staff }}</span>
</h3>
<div class="card mb-3">
<div class="bg-holder" style="background-image:url({% static 'images/bg/38.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="card mb-3">
<div class="bg-holder" style="background-image:url({% static 'images/bg/38.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="card-body d-flex justify-content-between position-relative">
<div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
<h3 class="mb-3">{{ _("Inventory by Status")}}</h3>
<div class="row g-0">
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ available_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold")}}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ sold_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ reserved_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ transfer_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ hold_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-secondary-dark" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ damaged_cars }}</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
<div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-cars-by-status-container mt-sm-7 mt-lg-4 mt-xl-0">
<div id="echart-cars-by-status" style="min-height:245px;width:100%"></div>
<div class="position-absolute rounded-circle bg-primary-subtle top-50 start-50 translate-middle d-flex flex-center" style="height:100px; width:100px;">
<h3 class="mb-0 text-primary-dark fw-bolder" data-label="data-label"></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-2">
<div class="col-12 mb-8">
<div class="mb-3">
<h3>{{ _("New Leads and Customers")}}</h3>
<p class="text-body-tertiary mb-0">{{ _("Payment received across all channels")}}</p>
</div>
<div class="row g-6">
<div class="col-xl-6 mb-2 mb-sm-0">
<div class="d-flex align-items-center"><span class="me-2 text-info" data-feather="users" style="min-height:24px; width:24px"></span>
<h4 class="text-body-tertiary mb-0">{{ _("New Customers")}} :
<span class="text-body-emphasis"> 42</span>
</h4>
<span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2">
<span class="badge-label d-inline-block lh-base">+24.5%</span>
<span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span>
</span>
</div>
<div class="pb-0 pt-4">
<div class="echarts-new-users" style="min-height:110px;width:100%;"></div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center"><span class="me-2 text-primary" data-feather="zap" style="height:24px; width:24px"></span>
<h4 class="text-body-tertiary mb-0">{{ _("New Leads")}} :<span class="text-body-emphasis"> 45</span></h4>
<span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2">
<span class="badge-label d-inline-block lh-base">+30.5%</span>
<span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span>
</span>
</div>
<div class="pb-0 pt-4">
<div class="echarts-new-leads" style="min-height:110px;width:100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="row g-3 pe-xxl-3">
<div class="col-12 col-xl-6 col-xxl-12">
<div class="row">
<div class="col-6 col-xl-12 col-xxl-6 border-bottom border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
<h4 class="text-body mb-4">{% trans 'inventory'|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div id="car-chart-by-make" class="order-sm-0 order-md-1" style="height:64px;width: 128px;"></div>
<div class="mt-4 mt-md-0">
<h1 class="text-body-highlight mb-2">{{ total_cars }}</h1>
<span class="badge badge-phoenix badge-phoenix-primary me-2 fs-10"> <span class="fs-10 text-body-secondary me-1">{{ _("As of")}}</span>{% now "SHORT_DATETIME_FORMAT" %}</span>
</div>
</div>
</div>
<div class="col-6 col-xl-12 col-xxl-6 border-bottom py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
<h4 class="text-body mb-4">{% trans 'inventory value'|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div class="d-md-flex align-items-center gap-2 order-sm-0 order-md-1 fa-2x align-items-center">
<i class="fas fa-money-check-alt fs-4 text-success-light dark__text-opacity-75"></i>
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
<h4 class="text-body-highlight mb-0"></h4>
<div class="card-body d-flex justify-content-between position-relative">
<div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
<h3 class="mb-3">{{ _("Inventory by Status")}}</h3>
<div class="row g-0">
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ available_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold")}}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ sold_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ reserved_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ transfer_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ hold_cars }}</h3>
</div>
</div>
<div class="col-6 col-xl-4">
<div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
<div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-secondary-dark" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span></div>
<h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ damaged_cars }}</h3>
</div>
</div>
</div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">{{ total_selling_price|currency_format }} <span class="currency"> {{ CURRENCY }}</span> </h3>
</div>
</div>
</div>
<div class="col-6 col-xl-12 col-xxl-6 border-bottom-xl border-bottom-xxl-0 border-end border-end-xl-0 border-end-xxl py-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
<h4 class="text-body mb-4">{% trans "Profits"|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div class="d-md-flex align-items-center gap-2 order-sm-0 order-md-1">
<span class="fa-solid fa-money-bill-trend-up fs-4 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
<h4 class="text-body-highlight mb-0"></h4>
<div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
<div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-cars-by-status-container mt-sm-7 mt-lg-4 mt-xl-0">
<div id="echart-cars-by-status" style="min-height:245px;width:100%"></div>
<div class="position-absolute rounded-circle bg-primary-subtle top-50 start-50 translate-middle d-flex flex-center" style="height:100px; width:100px;">
<h3 class="mb-0 text-primary-dark fw-bolder" data-label="data-label"></h3>
</div>
</div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">{{ total_profit|currency_format }} <span class="currency"> {{ CURRENCY }}</span> </h3>
</div>
</div>
</div>
</div>
<div class="row g-2">
<div class="col-12 mb-8">
<div class="mb-3">
<h3>{{ _("New Leads and Customers")}}</h3>
<p class="text-body-tertiary mb-0">{{ _("Payment received across all channels")}}</p>
</div>
<div class="row g-6">
<div class="col-xl-6 mb-2 mb-sm-0">
<div class="d-flex align-items-center"><span class="me-2 text-info" data-feather="users" style="min-height:24px; width:24px"></span>
<h4 class="text-body-tertiary mb-0">{{ _("New Customers")}} :
<span class="text-body-emphasis"> 42</span>
</h4>
<span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2">
<span class="badge-label d-inline-block lh-base">+24.5%</span>
<span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span>
</span>
</div>
<div class="pb-0 pt-4">
<div class="echarts-new-users" style="min-height:110px;width:100%;"></div>
</div>
</div>
</div>
<div class="col-6 col-xl-12 col-xxl-6 py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
<h5 class="text-body mb-4">{{ _("Canceled Invoices")}}</h5>
<div class="d-md-flex flex-between-center">
<div class="chart-cancel-booking order-sm-0 order-md-1" style="height:54px; width:78px"></div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">120.00</h3>
<span class="badge badge-phoenix badge-phoenix-danger me-2 fs-10"> <span class="fa-solid fa-plus me-1"></span>5.76%</span>
<span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">{{ _("From last month")}}</span>
<div class="col-md-6">
<div class="d-flex align-items-center"><span class="me-2 text-primary" data-feather="zap" style="height:24px; width:24px"></span>
<h4 class="text-body-tertiary mb-0">{{ _("New Leads")}} :<span class="text-body-emphasis"> 45</span></h4>
<span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2">
<span class="badge-label d-inline-block lh-base">+30.5%</span>
<span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span>
</span>
</div>
<div class="pb-0 pt-4">
<div class="echarts-new-leads" style="min-height:110px;width:100%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-6 col-xxl-12 mb-3">
<div class="card h-100">
<div class="card-header pb-3">
<div class="row justify-content-between g-3">
<div class="col-auto">
<h3 class="text-body-highlight">{{ _("Gross Profit")}}</h3>
<p class="mb-0">Annual income according to the board</p>
</div>
<div class="col-12 col-lg-6">
<div class="row g-3 pe-xxl-3">
<div class="col-12 col-xl-6 col-xxl-12">
<div class="row">
<div class="col-6 col-xl-12 col-xxl-6 border-bottom border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
<h4 class="text-body mb-4">{% trans 'inventory'|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div id="car-chart-by-make" class="order-sm-0 order-md-1" style="height:64px;width: 128px;"></div>
<div class="mt-4 mt-md-0">
<h1 class="text-body-highlight mb-2">{{ total_cars }}</h1>
<span class="badge badge-phoenix badge-phoenix-primary me-2 fs-10"> <span class="fs-10 text-body-secondary me-1">{{ _("As of")}}</span>{% now "SHORT_DATETIME_FORMAT" %}</span>
</div>
</div>
</div>
<div class="col-6 col-xl-12 col-xxl-6 border-bottom py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
<h4 class="text-body mb-4">{% trans 'inventory value'|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div class="d-md-flex align-items-center gap-2 order-sm-0 order-md-1 fa-2x align-items-center">
<i class="fas fa-money-check-alt fs-4 text-success-light dark__text-opacity-75"></i>
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
<h4 class="text-body-highlight mb-0"></h4>
</div>
</div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">{{ total_selling_price|currency_format }} <span class="currency"> {{ CURRENCY }}</span> </h3>
</div>
</div>
</div>
<div class="col-6 col-xl-12 col-xxl-6 border-bottom-xl border-bottom-xxl-0 border-end border-end-xl-0 border-end-xxl py-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
<h4 class="text-body mb-4">{% trans "Profits"|upper %}</h4>
<div class="d-md-flex flex-between-center">
<div class="d-md-flex align-items-center gap-2 order-sm-0 order-md-1">
<span class="fa-solid fa-money-bill-trend-up fs-4 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
<h4 class="text-body-highlight mb-0"></h4>
</div>
</div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">{{ total_profit|currency_format }} <span class="currency"> {{ CURRENCY }}</span> </h3>
</div>
</div>
</div>
<div class="col-6 col-xl-12 col-xxl-6 py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
<h5 class="text-body mb-4">{{ _("Canceled Invoices")}}</h5>
<div class="d-md-flex flex-between-center">
<div class="chart-cancel-booking order-sm-0 order-md-1" style="height:54px; width:78px"></div>
<div class="mt-3 mt-md-0">
<h3 class="text-body-highlight mb-2">120.00</h3>
<span class="badge badge-phoenix badge-phoenix-danger me-2 fs-10"> <span class="fa-solid fa-plus me-1"></span>5.76%</span>
<span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">{{ _("From last month")}}</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row align-items-center h-100 gy-5">
<div class="col-12 col-md-auto col-xl-12 col-xxl-auto order-md-1 order-xl-0 order-xxl-1 px-md-8 px-xl-6">
<div class="echart-gross-profit mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0" style="width: 250px; height: 250px"></div>
</div>
<div class="col-12 col-xl-6 col-xxl-12 mb-3">
<div class="card h-100">
<div class="card-header pb-3">
<div class="row justify-content-between g-3">
<div class="col-auto">
<h3 class="text-body-highlight">{{ _("Gross Profit")}}</h3>
<p class="mb-0">Annual income according to the board</p>
</div>
</div>
<div class="col-12 col-md-auto col-xl-12 col-xxl-auto flex-1 h-md-100">
<div class="d-flex flex-column justify-content-between h-md-100 h-xl-auto h-xxl-100">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex gap-2">
<div class="bullet-item bg-primary-light" data-bs-theme="light"></div>
<div>
<h6 class="mb-0 text-body fw-semibold mb-2">Flight</h6>
<h5 class="mb-0 text-body">$162,791,400</h5>
</div>
<div class="card-body">
<div class="row align-items-center h-100 gy-5">
<div class="col-12 col-md-auto col-xl-12 col-xxl-auto order-md-1 order-xl-0 order-xxl-1 px-md-8 px-xl-6">
<div class="echart-gross-profit mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0" style="width: 250px; height: 250px"></div>
</div>
<div class="col-12 col-md-auto col-xl-12 col-xxl-auto flex-1 h-md-100">
<div class="d-flex flex-column justify-content-between h-md-100 h-xl-auto h-xxl-100">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex gap-2">
<div class="bullet-item bg-primary-light" data-bs-theme="light"></div>
<div>
<h6 class="mb-0 text-body fw-semibold mb-2">Flight</h6>
<h5 class="mb-0 text-body">$162,791,400</h5>
</div>
</div>
<div class="d-flex align-items-center gap-2 text-primary">
<span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
<p class="mb-0 fw-bold">15.50%</p>
</div>
</div>
<div class="d-flex align-items-center gap-2 text-primary">
<span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
<p class="mb-0 fw-bold">15.50%</p>
</div>
</div>
<hr />
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex gap-2">
<div class="bullet-item bg-info-light" data-bs-theme="light"></div>
<div>
<h6 class="mb-0 text-body fw-semibold mb-2">Flight (Package)</h6>
<h5 class="mb-0 text-body">$135,659,500</h5>
<hr />
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex gap-2">
<div class="bullet-item bg-info-light" data-bs-theme="light"></div>
<div>
<h6 class="mb-0 text-body fw-semibold mb-2">Flight (Package)</h6>
<h5 class="mb-0 text-body">$135,659,500</h5>
</div>
</div>
<div class="d-flex align-items-center gap-2 text-danger">
<span class="fw-bold" data-feather="trending-down" style="width: 24px; height: 24px"></span>
<p class="mb-0 fw-bold">11.09%</p>
</div>
</div>
<div class="d-flex align-items-center gap-2 text-danger">
<span class="fw-bold" data-feather="trending-down" style="width: 24px; height: 24px"></span>
<p class="mb-0 fw-bold">11.09%</p>
</div>
</div>
<hr />
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex gap-2">
<div class="bullet-item bg-warning-light" data-bs-theme="light"></div>
<div>
<h6 class="mb-0 text-body fw-semibold mb-2">Hotel</h6>
<h5 class="mb-0 text-body">$271,319,000</h5>
<hr />
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex gap-2">
<div class="bullet-item bg-warning-light" data-bs-theme="light"></div>
<div>
<h6 class="mb-0 text-body fw-semibold mb-2">Hotel</h6>
<h5 class="mb-0 text-body">$271,319,000</h5>
</div>
</div>
<div class="d-flex align-items-center gap-2 text-warning">
<span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
<p class="mb-0 fw-bold">29.98%</p>
</div>
</div>
<div class="d-flex align-items-center gap-2 text-warning">
<span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
<p class="mb-0 fw-bold">29.98%</p>
</div>
</div>
<hr />
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex gap-2">
<div class="bullet-item bg-success-light" data-bs-theme="light"></div>
<div>
<h6 class="mb-0 text-body fw-semibold mb-2">Hotel (Package)</h6>
<h5 class="mb-0 text-body">$162,791,400</h5>
<hr />
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex gap-2">
<div class="bullet-item bg-success-light" data-bs-theme="light"></div>
<div>
<h6 class="mb-0 text-body fw-semibold mb-2">Hotel (Package)</h6>
<h5 class="mb-0 text-body">$162,791,400</h5>
</div>
</div>
<div class="d-flex align-items-center gap-2 text-success">
<span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
<p class="mb-0 fw-bold">03.90%</p>
</div>
</div>
<div class="d-flex align-items-center gap-2 text-success">
<span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
<p class="mb-0 fw-bold">03.90%</p>
</div>
<hr class="d-none" />
</div>
<hr class="d-none" />
</div>
</div>
</div>
@ -244,162 +245,161 @@
</div>
</div>
</div>
</div>
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
/* Car Chart By Make */
const getColor = (name, dom = document.documentElement) => {
return getComputedStyle(dom).getPropertyValue(`--phoenix-${name}`).trim();
};
const handleTooltipPosition = ([pos, , dom, , size]) => {
const getColor = (name, dom = document.documentElement) => {
return getComputedStyle(dom).getPropertyValue(`--phoenix-${name}`).trim();
};
const handleTooltipPosition = ([pos, , dom, , size]) => {
// only for mobile device
if (window.innerWidth <= 540) {
const tooltipHeight = dom.offsetHeight;
const obj = {top: pos[1] - tooltipHeight - 20};
obj[pos[0] < size.viewSize[0] / 2 ? 'left' : 'right'] = 5;
return obj;
}
return null; // else default behaviour
};
if (window.innerWidth <= 540) {
const tooltipHeight = dom.offsetHeight;
const obj = {top: pos[1] - tooltipHeight - 20};
obj[pos[0] < size.viewSize[0] / 2 ? 'left' : 'right'] = 5;
return obj;
}
return null; // else default behaviour
};
const carData = {{ car|safe }}
const carNames = carData.map(item => item.id_car_make__name);
const carCounts = carData.map(item => item.count);
const carData = {{ car|safe }}
const carNames = carData.map(item => item.id_car_make__name);
const carCounts = carData.map(item => item.count);
const car_chart = echarts.init(document.getElementById('car-chart-by-make'));
option = {
color: getColor("danger"),
tooltip: {
trigger: 'axis',
position: (...params) => handleTooltipPosition(params),
padding: [7, 10],
axisPointer: {
type: 'none'
},
},
extraCssText: 'z-index: 1000',
responsive: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: carNames,
axisLine: {
show: true,
lineStyle: {color: getColor('secondary-bg')}
const car_chart = echarts.init(document.getElementById('car-chart-by-make'));
option = {
color: getColor("danger"),
tooltip: {
trigger: 'axis',
position: (...params) => handleTooltipPosition(params),
padding: [7, 10],
axisPointer: {
type: 'none'
},
},
axisTick: {
show: false
},
}
],
yAxis: [
{
show: false,
type: 'value',
}
],
series: [
{
type: 'bar',
barWidth: 3,
backgroundStyle: {
borderRadius: [0.5, 0.5, 0, 0],
},
data: carCounts
},
],
grid: {
bottom: 0,
top: 0,
left: 10,
right: 10,
containLabel: false
}
};
extraCssText: 'z-index: 1000',
responsive: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: carNames,
axisLine: {
show: true,
lineStyle: {color: getColor('secondary-bg')}
},
axisTick: {
show: false
},
}
],
yAxis: [
{
show: false,
type: 'value',
}
],
series: [
{
type: 'bar',
barWidth: 3,
backgroundStyle: {
borderRadius: [0.5, 0.5, 0, 0],
},
data: carCounts
},
],
grid: {
bottom: 0,
top: 0,
left: 10,
right: 10,
containLabel: false
}
};
car_chart.setOption(option);
car_chart.setOption(option);
/* Car Status Chart */
const chartElContainer = document.querySelector('.echart-cars-by-status-container');
const car_status = echarts.init(document.getElementById('echart-cars-by-status'));
const chartLabel = chartElContainer.querySelector('[data-label]');
const data = [
{value: {{available_cars}}, name: '{{ _("Available") }}'},
{value: {{sold_cars}}, name: '{{ _("Sold")}}'},
{value: {{reserved_cars}}, name: '{{ _("Reserved") }}'},
{value: {{transfer_cars}}, name: '{{ _("Transfer") }}'},
{value: {{hold_cars}}, name: '{{ _("Hold") }}'},
{value: {{damaged_cars}}, name: '{{ _("Damaged") }}'}
];
const totalCars = data.reduce((acc, val) => val.value + acc, 0);
if (chartLabel) {
chartLabel.innerHTML = totalCars;
}
option = {
color: [
getColor('success'),
getColor('warning'),
getColor('danger'),
getColor('primary'),
getColor('warning-lighter'),
getColor('secondary-dark')
],
tooltip: {
trigger: 'item',
padding: [7, 10],
backgroundColor: getColor('body-highlight-bg'),
borderColor: getColor('border-color'),
textStyle: {color: getColor('light-text-emphasis')},
borderWidth: 1,
transitionDuration: 0,
extraCssText: 'z-index: 1000'
},
responsive: true,
maintainAspectRatio: false,
series: [
{
name: '',
type: 'pie',
radius: ['55%', '90%'],
startAngle: 90,
avoidLabelOverlap: false,
itemStyle: {
borderColor: getColor('body-bg'),
borderWidth: 3
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
labelLine: {
show: false
},
data
const chartElContainer = document.querySelector('.echart-cars-by-status-container');
const car_status = echarts.init(document.getElementById('echart-cars-by-status'));
const chartLabel = chartElContainer.querySelector('[data-label]');
const data = [
{value: {{available_cars}}, name: '{{ _("Available") }}'},
{value: {{sold_cars}}, name: '{{ _("Sold")}}'},
{value: {{reserved_cars}}, name: '{{ _("Reserved") }}'},
{value: {{transfer_cars}}, name: '{{ _("Transfer") }}'},
{value: {{hold_cars}}, name: '{{ _("Hold") }}'},
{value: {{damaged_cars}}, name: '{{ _("Damaged") }}'}
];
const totalCars = data.reduce((acc, val) => val.value + acc, 0);
if (chartLabel) {
chartLabel.innerHTML = totalCars;
}
],
grid: {
bottom: 0,
top: 0,
left: 0,
right: 0,
containLabel: false
}
};
car_status.setOption(option);
option = {
color: [
getColor('success'),
getColor('warning'),
getColor('danger'),
getColor('primary'),
getColor('warning-lighter'),
getColor('secondary-dark')
],
tooltip: {
trigger: 'item',
padding: [7, 10],
backgroundColor: getColor('body-highlight-bg'),
borderColor: getColor('border-color'),
textStyle: {color: getColor('light-text-emphasis')},
borderWidth: 1,
transitionDuration: 0,
extraCssText: 'z-index: 1000'
},
responsive: true,
maintainAspectRatio: false,
series: [
{
name: '',
type: 'pie',
radius: ['55%', '90%'],
startAngle: 90,
avoidLabelOverlap: false,
itemStyle: {
borderColor: getColor('body-bg'),
borderWidth: 3
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
labelLine: {
show: false
},
data
}
],
grid: {
bottom: 0,
top: 0,
left: 0,
right: 0,
containLabel: false
}
};
car_status.setOption(option);
});
</script>
});
</script>
{% endblock %}

136
templates/dealers/activity_log.html
View File

@ -1,81 +1,81 @@
{% extends 'base.html' %}
{% load i18n static %}
{% block content %}
<div class="row">
<div class="ol-auto pt-5 pb-9">
<div class="row-sm">
<div class="row d-flex-center">
<div class="col-8">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active show" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">
<h3 class="mb-4">{{ _("Activity") }}</h3>
<div class="border-bottom py-4">
{% for log in logs %}
<div class="d-flex">
<div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle" style="width: 25px; height: 25px;">
<span class="fa-solid text-primary-dark fs-9 fa-clipboard text-primary-dark"></span>
</div>
<div class="flex-1">
<div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
<div class="flex-1 me-2">
<h5 class="text-body-highlight lh-sm">{{ log.user }}</h5>
<div class="row">
<div class="ol-auto pt-5 pb-9">
<div class="row-sm">
<div class="row d-flex-center">
<div class="col-8">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active show" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">
<h3 class="mb-4">{{ _("Activity") }}</h3>
<div class="border-bottom py-4">
{% for log in logs %}
<div class="d-flex">
<div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle" style="width: 25px; height: 25px;">
<span class="fa-solid text-primary-dark fs-9 fa-clipboard text-primary-dark"></span>
</div>
<div class="flex-1">
<div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
<div class="flex-1 me-2">
<h5 class="text-body-highlight lh-sm">{{ log.user }}</h5>
</div>
<div class="fs-9"><span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{ log.timestamp }}</span></div>
</div>
<p class="fs-9 mb-0">{{ log.action }}</p>
</div>
</div>
<div class="fs-9"><span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{ log.timestamp }}</span></div>
</div>
<p class="fs-9 mb-0">{{ log.action }}</p>
</div>
<div class="border-bottom border-translucent py-4">
{% endfor %}
</div>
</div>
</div>
<div class="border-bottom border-translucent py-4">
{% endfor %}
</div>
</div>
{% if is_paginated %}
<nav aria-label="Page navigation">
<ul class="pagination mb-0">
{% if page_obj.has_previous %}
<li class="page-item py-0">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
<span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
</a>
</li>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
{% else %}
<li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
<span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
</div>
{% if is_paginated %}
<nav aria-label="Page navigation">
<ul class="pagination mb-0">
{% if page_obj.has_previous %}
<li class="page-item py-0">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
<span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
</a>
</li>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
{% else %}
<li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
<span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}

2
templates/dealers/assign_car_makes.html
View File

@ -85,7 +85,7 @@
{% endfor %}
</div>
<div class="d-grid gap-2">
<button class="btn btn-success btn-sm" type="submit">{{ _("Save") }} <i class="fa fa-save"></i></button>
<button class="btn btn-success btn-sm" type="submit">{{ _("Save") }} <i class="fa fa-save"></i></button>
</div>
</form>
{% endblock %}

298
templates/dealers/dealer_detail.html
View File

@ -1,140 +1,141 @@
{% extends 'base.html' %} {% load i18n static custom_filters%} {% block content %}
<div class="container-fluid">
<div class="row align-items-center justify-content-between g-3 mb-4">
<div class="col-auto">
<h2 class="mb-0">{% trans 'Profile' %}</h2>
</div>
<div class="col-auto">
<div class="row g-2 g-sm-3">
<div class="col-auto">
<a href="{% url 'account_change_password' %}" class="btn btn-phoenix-danger"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a>
</div>
<div class="col-auto">
<a class="btn btn-phoenix-secondary" href="{% url 'dealer_update' dealer.pk %}"><span class="fas fa-edit me-2 text-body-quaternary"></span>{{ _("Edit") }} </a>
<div class="container-fluid">
<div class="row align-items-center justify-content-between g-3 mb-4">
<div class="col-auto">
<h2 class="mb-0">{% trans 'Profile' %}</h2>
</div>
<div class="col-auto">
<div class="row g-2 g-sm-3">
<div class="col-auto">
<a href="{% url 'account_change_password' %}" class="btn btn-phoenix-danger"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a>
</div>
<div class="col-auto">
<a class="btn btn-phoenix-secondary" href="{% url 'dealer_update' dealer.pk %}"><span class="fas fa-edit me-2 text-body-quaternary"></span>{{ _("Edit") }} </a>
</div>
</div>
</div>
</div>
</div>
<div class="row g-3">
<div class="col-12 col-lg-8">
<div class="card h-100">
<div class="card-body">
<div class="border-bottom border-dashed pb-4">
<div class="row align-items-center g-3 g-sm-5 text-center text-sm-start">
<div class="col-12 col-sm-auto">
<input class="d-none" id="avatarFile" type="file" />
<label class="cursor-pointer avatar avatar-5xl" for="avatarFile">
{% if dealer.logo %}
<img src="{{ dealer.logo.url }}" alt="{{ dealer.get_local_name }}" class="rounded-circle" style="max-width: 150px;" />
<div class="row g-3">
<div class="col-12 col-lg-8">
<div class="card h-100">
<div class="card-body">
<div class="border-bottom border-dashed pb-4">
<div class="row align-items-center g-3 g-sm-5 text-center text-sm-start">
<div class="col-12 col-sm-auto">
<input class="d-none" id="avatarFile" type="file" />
<label class="cursor-pointer avatar avatar-5xl" for="avatarFile">
{% if dealer.logo %}
<img src="{{ dealer.logo.url }}" alt="{{ dealer.get_local_name }}" class="rounded-circle" style="max-width: 150px;" />
{% else %}
<span class="rounded-circle feather feather-user text-body-tertiary" style="max-width: 150px;"></span>
<img src="{% static 'images/logos/logo.png' %}" alt="{{ dealer.get_local_name }}" class="" style="max-width: 150px;" />
{% endif %}
</label>
</div>
<div class="col-12 col-sm-auto flex-1">
<h3>{{ dealer.get_local_name }}</h3>
<p class="text-body-secondary">{% trans 'Joined' %} {{ dealer.joined_at|timesince}} {% trans 'ago' %}</p>
<div></div>
</div>
</div>
</div>
<div class="d-flex flex-between-center pt-4">
<div>
<h6 class="mb-2 text-body-secondary">{% trans 'last login'|capfirst %}</h6>
<h4 class="fs-7 text-body-highlight mb-0">{{ dealer.user.last_login|date:"D M d, Y H:i" }}</h4>
</div>
<div class="text-center me-1">
<h6 class="mb-2 text-body-secondary">{% trans 'Total users'|capfirst %}</h6>
<h4 class="fs-7 text-body-highlight mb-0">{{ dealer.staff_count }} / {{ allowed_users }}</h4>
</div>
<div class="text-center">
<h6 class="mb-2 text-body-secondary">{% trans 'Total cars'|capfirst %}</h6>
<h4 class="fs-7 text-body-highlight mb-0">{{ cars_count }} / {{ allowed_cars }}</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body">
<div class="border-bottom border-dashed">
<h4 class="mb-3">{% trans 'Default Address' %}</h4>
</div>
<div class="pt-4 mb-7 mb-lg-4 mb-xl-7">
<div class="row justify-content-between">
<div class="col-auto">
<h5 class="text-body-highlight">{% trans 'Address' %}</h5>
</div>
<div class="col-auto">
<p class="text-body-secondary">{{ dealer.address}}</p>
</div>
</div>
</div>
<div class="border-top border-dashed pt-4">
<div class="row flex-between-center mb-2">
<div class="col-auto">
<h5 class="text-body-highlight mb-0">{% trans 'Email' %}</h5>
</div>
<div class="col-auto">{{dealer.user.email}}</div>
</div>
<div class="row flex-between-center">
<div class="col-auto">
<h5 class="text-body-highlight mb-0">{% trans 'Phone' %}</h5>
</div>
<div class="col-auto" dir="ltr">{{ dealer.phone_number }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-3 my-2">
<div class="col-12 col-lg-6">
<div class="card h-100">
<div class="bg-holder d-dark-none" style="background-image:url({% static 'images/bg/8.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="bg-holder d-light-none" style="background-image:url({% static 'images/bg/8-dark.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="card-body d-flex flex-column justify-content-between position-relative">
<div class="d-flex justify-content-between">
<div class="mb-5 mb-md-0 mb-lg-5">
<div class="d-sm-flex d-md-block d-lg-flex align-items-center mb-3">
<h3 class="mb-0 me-2">{{ dealer.user.userplan.plan|capfirst }}</h3>
{% if dealer.user.userplan %}
{% if not dealer.user.userplan.is_expired %}
<span class="badge badge-phoenix fs-9 badge-phoenix-success"> <span class="badge-label">{% trans 'Active' %}</span><span class="ms-1" data-feather="check" style="height:16px;width:16px;"></span> </span>
{% else %}
<span class="badge badge-phoenix fs-9 badge-phoenix-danger"> <span class="badge-label">{% trans 'Expired' %}</span><span class="ms-1" data-feather="times" style="height:16px;width:16px;"></span> </span>
<a href="{% url 'pricing_page' %}" class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Renew") }}</a>
{% endif %}
{% if dealer.user.userplan.plan.name != "Enterprise" %}
<a href="{% url 'pricing_page' %}" class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Upgrade") }}</a>
{% endif %}
{% else %}
<span class="rounded-circle feather feather-user text-body-tertiary" style="max-width: 150px;"></span>
<img src="{% static 'images/logos/logo.png' %}" alt="{{ dealer.get_local_name }}" class="" style="max-width: 150px;" />
<span class="text-body-tertiary fw-semibold">You have no active plan.</span> <a href="{% url 'pricing_page' %}" class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Subscribe") }}</a>
{% endif %}
</label>
</div>
<div class="col-12 col-sm-auto flex-1">
<h3>{{ dealer.get_local_name }}</h3>
<p class="text-body-secondary">{% trans 'Joined' %} {{ dealer.joined_at|timesince}} {% trans 'ago' %}</p>
<div></div>
</div>
</div>
</div>
<div class="d-flex flex-between-center pt-4">
<div>
<h6 class="mb-2 text-body-secondary">{% trans 'last login'|capfirst %}</h6>
<h4 class="fs-7 text-body-highlight mb-0">{{ dealer.user.last_login|date:"D M d, Y H:i" }}</h4>
</div>
<div class="text-center me-1">
<h6 class="mb-2 text-body-secondary">{% trans 'Total users'|capfirst %}</h6>
<h4 class="fs-7 text-body-highlight mb-0">{{ dealer.staff_count }} / {{ allowed_users }}</h4>
</div>
<div class="text-center">
<h6 class="mb-2 text-body-secondary">{% trans 'Total cars'|capfirst %}</h6>
<h4 class="fs-7 text-body-highlight mb-0">{{ cars_count }} / {{ allowed_cars }}</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card h-100">
<div class="card-body">
<div class="border-bottom border-dashed">
<h4 class="mb-3">{% trans 'Default Address' %}</h4>
</div>
<div class="pt-4 mb-7 mb-lg-4 mb-xl-7">
<div class="row justify-content-between">
<div class="col-auto">
<h5 class="text-body-highlight">{% trans 'Address' %}</h5>
</div>
<div class="col-auto">
<p class="text-body-secondary">{{ dealer.address}}</p>
</div>
</div>
</div>
<div class="border-top border-dashed pt-4">
<div class="row flex-between-center mb-2">
<div class="col-auto">
<h5 class="text-body-highlight mb-0">{% trans 'Email' %}</h5>
</div>
<div class="col-auto">{{dealer.user.email}}</div>
</div>
<div class="row flex-between-center">
<div class="col-auto">
<h5 class="text-body-highlight mb-0">{% trans 'Phone' %}</h5>
</div>
<div class="col-auto" dir="ltr">{{ dealer.phone_number }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-3 my-2">
<div class="col-12 col-lg-6">
<div class="card h-100">
<div class="bg-holder d-dark-none" style="background-image:url({% static 'images/bg/8.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="bg-holder d-light-none" style="background-image:url({% static 'images/bg/8-dark.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="card-body d-flex flex-column justify-content-between position-relative">
<div class="d-flex justify-content-between">
<div class="mb-5 mb-md-0 mb-lg-5">
<div class="d-sm-flex d-md-block d-lg-flex align-items-center mb-3">
<h3 class="mb-0 me-2">{{ dealer.user.userplan.plan|capfirst }}</h3>
{% if dealer.user.userplan %}
{% if not dealer.user.userplan.is_expired %}
<span class="badge badge-phoenix fs-9 badge-phoenix-success"> <span class="badge-label">{% trans 'Active' %}</span><span class="ms-1" data-feather="check" style="height:16px;width:16px;"></span> </span>
{% else %}
<span class="badge badge-phoenix fs-9 badge-phoenix-danger"> <span class="badge-label">{% trans 'Expired' %}</span><span class="ms-1" data-feather="times" style="height:16px;width:16px;"></span> </span>
<a href="{% url 'pricing_page' %}" class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Renew") }}</a>
{% endif %}
{% if dealer.user.userplan.plan.name != "Enterprise" %}
<a href="{% url 'pricing_page' %}" class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Upgrade") }}</a>
{% endif %}
{% else %}
<span class="text-body-tertiary fw-semibold">You have no active plan.</span> <a href="{% url 'pricing_page' %}" class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Subscribe") }}</a>
{% endif %}
</div>
<p class="fs-9 text-body-tertiary">{% trans 'Active until' %}: {{ dealer.user.userplan.expire}}&nbsp;&nbsp; <small>{% trans 'Days left' %}: {{ dealer.user.userplan.days_left}}</small></p>
<div class="d-flex align-items-end mb-md-5 mb-lg-0">
<h4 class="fw-bolder me-1">{{ dealer.user.userplan.plan.planpricing_set.first.price }}<span class="currency"> {{ CURRENCY }}</span></h4>
<h5 class="fs-9 fw-normal text-body-tertiary ms-1">{{ _("Per month")}}</h5>
</div>
</div>
<p class="fs-9 text-body-tertiary">{% trans 'Active until' %}: {{ dealer.user.userplan.expire}}&nbsp;&nbsp; <small>{% trans 'Days left' %}: {{ dealer.user.userplan.days_left}}</small></p>
<div class="d-flex align-items-end mb-md-5 mb-lg-0">
<h4 class="fw-bolder me-1">{{ dealer.user.userplan.plan.planpricing_set.first.price }}<span class="currency"> {{ CURRENCY }}</span></h4>
<h5 class="fs-9 fw-normal text-body-tertiary ms-1">{{ _("Per month")}}</h5>
</div>
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" style="opacity: 0.2;height: 64px;" alt="" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" style="opacity: 0.2;height: 64px;" alt="" />
</div>
<img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" style="opacity: 0.2;height: 64px;" alt="" />
<img class="d-light-none" src="{% static 'images/logos/logo.png' %}" style="opacity: 0.2;height: 64px;" alt="" />
</div>
<div class="row justify-content-end">
<div class="col-sm-8 col-md-12">
<div class="d-sm-flex d-md-block d-lg-flex justify-content-end align-items-end h-100">
<div class="list-unstyled mb-0 border-start-sm border-start-md-0 border-start-lg ps-sm-5 ps-md-0 ps-lg-5 border-secondary-subtle">
<div class="d-flex flex-column">
{% for line in dealer.user.userplan.plan.description|splitlines %}
<div class="d-flex align-items-center">
<span class="uil uil-check-circle text-success me-2"></span>
<span class="text-body-tertiary fw-semibold">{{ line }}</span>
<div class="row justify-content-end">
<div class="col-sm-8 col-md-12">
<div class="d-sm-flex d-md-block d-lg-flex justify-content-end align-items-end h-100">
<div class="list-unstyled mb-0 border-start-sm border-start-md-0 border-start-lg ps-sm-5 ps-md-0 ps-lg-5 border-secondary-subtle">
<div class="d-flex flex-column">
{% for line in dealer.user.userplan.plan.description|splitlines %}
<div class="d-flex align-items-center">
<span class="uil uil-check-circle text-success me-2"></span>
<span class="text-body-tertiary fw-semibold">{{ line }}</span>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
@ -142,37 +143,36 @@
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card h-100">
<div class="bg-holder" style="background-image:url({% static 'images/bg/bg-left-20.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="card-body d-flex flex-column justify-content-center position-relative">
<h4 class="mb-3">{{ _("Makes you are selling") }}</h4>
<div class="d-flex justify-content-center ">
<div class="text-center me-3">
<div class="col-12 col-lg-6">
<div class="card h-100">
<div class="bg-holder" style="background-image:url({% static 'images/bg/bg-left-20.png' %});background-position:left bottom;background-size:auto;"></div>
<div class="card-body d-flex flex-column justify-content-center position-relative">
<h4 class="mb-3">{{ _("Makes you are selling") }}</h4>
<div class="d-flex justify-content-center ">
<div class="text-center me-3">
<div class="row">
{% for make in car_makes %}
<div class="col my-1">
{% if make.logo %}
<img src="{{ make.logo.url }}" alt="{{ make.get_local_name }}" class="rounded rounded-1" style="height: 64px;" />
{% endif %}
<p class="fs-10">{{ make.get_local_name }}</p>
<div class="row">
{% for make in car_makes %}
<div class="col my-1">
{% if make.logo %}
<img src="{{ make.logo.url }}" alt="{{ make.get_local_name }}" class="rounded rounded-1" style="height: 64px;" />
{% endif %}
<p class="fs-10">{{ make.get_local_name }}</p>
</div>
{% endfor %}
</div>
<div class="row">
<a class="btn btn-sm btn-phoenix-warning" href="{% url 'assign_car_makes' %}">{{ _("Select Makes")}}</a>
</div>
</div>
{% endfor %}
</div>
<div class="row">
<a class="btn btn-sm btn-phoenix-warning" href="{% url 'assign_car_makes' %}">{{ _("Select Makes")}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

30
templates/dealers/dealer_form.html
View File

@ -5,24 +5,24 @@
{% block title %}{{ _("Update Dealer Information") }}{% endblock title %}
{% block content %}
<div class="row my-5">
<div class="col-md-8">
<div class="row my-5">
<div class="col-md-8">
<!-- Form Header -->
<h4 class="mb-3">{{ _("Update Dealer Information") }}</h4>
<h4 class="mb-3">{{ _("Update Dealer Information") }}</h4>
<form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
{% csrf_token %}
{{ form|crispy }}
<div class="gap-2 mt-3">
<button type="submit" class="btn btn-phoenix-primary btn-sm">
<i class="fa fa-save"></i> {{ _("Save") }}
</button>
<a href="{% url 'dealer_detail' dealer.pk %}" class="btn btn-sm btn-phoenix-secondary">
<i class="fas fa-times"></i> {{ _("Cancel") }}</a>
</div>
</form>
<form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
{% csrf_token %}
{{ form|crispy }}
<div class="gap-2 mt-3">
<button type="submit" class="btn btn-phoenix-primary btn-sm">
<i class="fa fa-save"></i> {{ _("Save") }}
</button>
<a href="{% url 'dealer_detail' dealer.pk %}" class="btn btn-sm btn-phoenix-secondary">
<i class="fas fa-times"></i> {{ _("Cancel") }}</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

124
templates/email_sender/admin_new_appointment_email.html
View File

@ -1,74 +1,74 @@
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% translate 'Appointment Request Notification' %}</title>
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
padding: 20px;
margin: 0;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% translate 'Appointment Request Notification' %}</title>
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
padding: 20px;
margin: 0;
}
.email-container {
background-color: #ffffff;
padding: 25px;
margin: 0 auto;
max-width: 650px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.email-container {
background-color: #ffffff;
padding: 25px;
margin: 0 auto;
max-width: 650px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
h1 {
color: #333;
font-size: 24px;
}
h1 {
color: #333;
font-size: 24px;
}
p {
font-size: 16px;
line-height: 1.6;
}
p {
font-size: 16px;
line-height: 1.6;
}
.appointment-details {
background-color: #f9f9f9;
padding: 15px;
margin-top: 20px;
border-left: 5px solid #007bff;
}
.appointment-details {
background-color: #f9f9f9;
padding: 15px;
margin-top: 20px;
border-left: 5px solid #007bff;
}
.footer {
margin-top: 30px;
font-size: 14px;
text-align: left;
color: #999;
}
</style>
</head>
<body>
<div class="email-container">
<h1>{% translate 'New Appointment Request' %}</h1>
<p>{% translate 'Dear Admin,' %}</p>
<p>{% translate 'You have received a new appointment request. Here are the details:' %}</p>
.footer {
margin-top: 30px;
font-size: 14px;
text-align: left;
color: #999;
}
</style>
</head>
<body>
<div class="email-container">
<h1>{% translate 'New Appointment Request' %}</h1>
<p>{% translate 'Dear Admin,' %}</p>
<p>{% translate 'You have received a new appointment request. Here are the details:' %}</p>
<div class="appointment-details">
<p><strong>{% translate 'Client Name' %}:</strong> {{ client_name }}</p>
<p><strong>{% translate 'Service Requested' %}:</strong> {{ appointment.get_service_name }}</p>
<p><strong>{% translate 'Appointment Date' %}:</strong> {{ appointment.appointment_request.date }}</p>
<p><strong>{% translate 'Time' %}:</strong> {{ appointment.appointment_request.start_time }}
- {{ appointment.appointment_request.end_time }}</p>
<p><strong>{% translate 'Contact Details' %}:</strong> {{ appointment.phone }} | {{ appointment.client.email }}</p>
<p><strong>{% translate 'Additional Info' %}:</strong> {{ appointment.additional_info|default:"N/A" }}</p>
</div>
<div class="appointment-details">
<p><strong>{% translate 'Client Name' %}:</strong> {{ client_name }}</p>
<p><strong>{% translate 'Service Requested' %}:</strong> {{ appointment.get_service_name }}</p>
<p><strong>{% translate 'Appointment Date' %}:</strong> {{ appointment.appointment_request.date }}</p>
<p><strong>{% translate 'Time' %}:</strong> {{ appointment.appointment_request.start_time }}
- {{ appointment.appointment_request.end_time }}</p>
<p><strong>{% translate 'Contact Details' %}:</strong> {{ appointment.phone }} | {{ appointment.client.email }}</p>
<p><strong>{% translate 'Additional Info' %}:</strong> {{ appointment.additional_info|default:"N/A" }}</p>
</div>
<p>{% translate 'Please review the appointment request and take the necessary action.' %}</p>
<p>{% translate 'Please review the appointment request and take the necessary action.' %}</p>
<div class="footer">
<p>{% translate 'This is an automated message. Please do not reply directly to this email.' %}</p>
</div>
</div>
</body>
<div class="footer">
<p>{% translate 'This is an automated message. Please do not reply directly to this email.' %}</p>
</div>
</div>
</body>
</html>

174
templates/email_sender/reminder_email.html
View File

@ -1,97 +1,97 @@
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% translate 'Appointment Reminder' %}</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
color: #636363;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% translate 'Appointment Reminder' %}</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
color: #636363;
}
.email-container {
max-width: 600px;
background: #ffffff;
margin: 0 auto;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.email-container {
max-width: 600px;
background: #ffffff;
margin: 0 auto;
padding: 25px;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.email-header {
color: #ffffff;
background-color: rgb(5, 100, 129);
padding: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
text-align: center;
}
.email-header {
color: #ffffff;
background-color: rgb(5, 100, 129);
padding: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
text-align: center;
}
.email-body {
padding: 25px;
line-height: 1.6;
}
.email-body {
padding: 25px;
line-height: 1.6;
}
.email-footer {
padding-top: 20px;
font-size: 14px;
text-align: left;
color: #aaaaaa;
}
.email-footer {
padding-top: 20px;
font-size: 14px;
text-align: left;
color: #aaaaaa;
}
.button {
background-color: rgb(5, 100, 129);
color: #ffffff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
margin-top: 20px;
text-decoration-color: white;
}
.button {
background-color: rgb(5, 100, 129);
color: #ffffff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
margin-top: 20px;
text-decoration-color: white;
}
.button:hover {
background-color: #37aee9;
color: #ffffff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="email-container">
<div class="email-header">
<h2>{% translate 'Appointment Reminder' %}</h2>
</div>
<div class="email-body">
<p>
{% if recipient_type == 'client' %}
{% translate 'Dear' %} {{ first_name }},
{% else %}
{% translate 'Dear Administrator,' %}
{% endif %}
</p>
<p>{% translate 'This is a reminder for your upcoming appointment.' %}</p>
<p><strong>{% translate 'Service' %}:</strong> {{ appointment.get_service_name }}</p>
<p><strong>{% translate 'Date' %}:</strong> {{ appointment.appointment_request.date }}</p>
<p><strong>{% translate 'Time' %}:</strong> {{ appointment.appointment_request.start_time }}
- {{ appointment.appointment_request.end_time }}</p>
<p><strong>{% translate 'Location' %}:</strong> {{ appointment.address }}</p>
{% if recipient_type == 'client' %}
<p>{% translate 'If you need to reschedule, please click the button below or contact us for further assistance.' %}</p>
<a href="{{ reschedule_link }}" class="button">{% translate 'Reschedule Appointment' %}</a>
<p>{% translate 'Thank you for choosing us!' %}</p>
{% else %}
<p>{% translate 'Please ensure the appointment setup is complete and ready for the client.' %}</p>
{% endif %}
</div>
<div class="email-footer">
{% translate 'This is an automated message. Please do not reply directly to this email.' %}
</div>
</div>
</body>
.button:hover {
background-color: #37aee9;
color: #ffffff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="email-container">
<div class="email-header">
<h2>{% translate 'Appointment Reminder' %}</h2>
</div>
<div class="email-body">
<p>
{% if recipient_type == 'client' %}
{% translate 'Dear' %} {{ first_name }},
{% else %}
{% translate 'Dear Administrator,' %}
{% endif %}
</p>
<p>{% translate 'This is a reminder for your upcoming appointment.' %}</p>
<p><strong>{% translate 'Service' %}:</strong> {{ appointment.get_service_name }}</p>
<p><strong>{% translate 'Date' %}:</strong> {{ appointment.appointment_request.date }}</p>
<p><strong>{% translate 'Time' %}:</strong> {{ appointment.appointment_request.start_time }}
- {{ appointment.appointment_request.end_time }}</p>
<p><strong>{% translate 'Location' %}:</strong> {{ appointment.address }}</p>
{% if recipient_type == 'client' %}
<p>{% translate 'If you need to reschedule, please click the button below or contact us for further assistance.' %}</p>
<a href="{{ reschedule_link }}" class="button">{% translate 'Reschedule Appointment' %}</a>
<p>{% translate 'Thank you for choosing us!' %}</p>
{% else %}
<p>{% translate 'Please ensure the appointment setup is complete and ready for the client.' %}</p>
{% endif %}
</div>
<div class="email-footer">
{% translate 'This is an automated message. Please do not reply directly to this email.' %}
</div>
</div>
</body>
</html>

160
templates/email_sender/reschedule_email.html
View File

@ -1,93 +1,93 @@
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% trans "Appointment Reschedule Confirmation" %}</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
<head>
<meta charset="UTF-8">
<title>{% trans "Appointment Reschedule Confirmation" %}</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.email-container {
max-width: 600px;
background: #ffffff;
margin: 20px auto;
padding: 20px;
border: 1px solid #dddddd;
}
.email-container {
max-width: 600px;
background: #ffffff;
margin: 20px auto;
padding: 20px;
border: 1px solid #dddddd;
}
.email-content {
margin: 20px 0;
}
.email-content {
margin: 20px 0;
}
.fallback-link {
margin-top: 20px;
}
.fallback-link {
margin-top: 20px;
}
a {
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
a {
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
<!-- email_template.html -->
<div class="email-container">
<h2>{% trans "Appointment Reschedule" %}</h2>
<div class="email-content">
{% if is_confirmation %}
<p>{% trans "Dear" %} {{ first_name }},</p>
{% else %}
<p>{% trans "Hi" %},</p>
{% endif %}
<div class="email-container">
<h2>{% trans "Appointment Reschedule" %}</h2>
<div class="email-content">
{% if is_confirmation %}
<p>{% trans "Dear" %} {{ first_name }},</p>
{% else %}
<p>{% trans "Hi" %},</p>
{% endif %}
{% if is_confirmation %}
<p>
{% trans "You have requested to reschedule your appointment. Please review the changes below and confirm:" %}
</p>
{% else %}
<p>
{% trans "An appointment with" %} <b>{{ client_name }}</b> {% trans "for the service" %}
<b>{{ service_name }}</b> {% trans "has been rescheduled." %}
{% if reason_for_rescheduling %}
<br><b>{% trans "Reason for rescheduling:" %}</b>
{{ reason_for_rescheduling }}{% endif %}
</p>
{% endif %}
{% if is_confirmation %}
<p>
{% trans "You have requested to reschedule your appointment. Please review the changes below and confirm:" %}
</p>
{% else %}
<p>
{% trans "An appointment with" %} <b>{{ client_name }}</b> {% trans "for the service" %}
<b>{{ service_name }}</b> {% trans "has been rescheduled." %}
{% if reason_for_rescheduling %}
<br><b>{% trans "Reason for rescheduling:" %}</b>
{{ reason_for_rescheduling }}{% endif %}
</p>
{% endif %}
<p>
<b>{% trans "Original Appointment:" %}</b><br>
{% trans "Date" %}: {{ old_date }}<br>
{% trans "Time" %}: {{ old_start_time }} {% trans ' to ' %} {{ old_end_time }}
</p>
<p>
<b>{% trans "Rescheduled Appointment:" %}</b><br>
{% trans "Date" %}: {{ reschedule_date }}<br>
{% trans "Time" %}: {{ start_time }} {% trans ' to ' %} {{ end_time }}
</p>
<p>
<b>{% trans "Original Appointment:" %}</b><br>
{% trans "Date" %}: {{ old_date }}<br>
{% trans "Time" %}: {{ old_start_time }} {% trans ' to ' %} {{ old_end_time }}
</p>
<p>
<b>{% trans "Rescheduled Appointment:" %}</b><br>
{% trans "Date" %}: {{ reschedule_date }}<br>
{% trans "Time" %}: {{ start_time }} {% trans ' to ' %} {{ end_time }}
</p>
{% if is_confirmation %}
<p>
{% trans "This link will expire in 5 minutes. If you do not confirm within this time frame, you will need to submit a new reschedule request." %}
</p>
<a href="{{ confirmation_link }}"
style="background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">
{% trans "Confirm Appointment" %}
</a>
<div class="fallback-link">
{% trans "If the button above does not work, please copy and paste the following link into your browser:" %}
<br>
<a href="{{ confirmation_link }}">{{ confirmation_link }}</a>
{% if is_confirmation %}
<p>
{% trans "This link will expire in 5 minutes. If you do not confirm within this time frame, you will need to submit a new reschedule request." %}
</p>
<a href="{{ confirmation_link }}"
style="background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">
{% trans "Confirm Appointment" %}
</a>
<div class="fallback-link">
{% trans "If the button above does not work, please copy and paste the following link into your browser:" %}
<br>
<a href="{{ confirmation_link }}">{{ confirmation_link }}</a>
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="email-footer">
<p>{% trans "Thank you," %}<br>{{ company }}</p>
</div>
</div>
</body>
<div class="email-footer">
<p>{% trans "Thank you," %}<br>{{ company }}</p>
</div>
</div>
</body>
</html>

448
templates/email_sender/thank_you_email.html
View File

@ -2,289 +2,289 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
<head>
<title></title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body, table, td, a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table, td {
mso-table-lspace: 0;
mso-table-rspace: 0;
}
table, td {
mso-table-lspace: 0;
mso-table-rspace: 0;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.appointment-details li {
padding: 0 !important; /* Add padding left to the details */
}
.appointment-details li {
padding: 0 !important; /* Add padding left to the details */
}
/* MOBILE STYLES */
@media screen and (max-width: 500px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
@media screen and (max-width: 500px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="margin: 0 !important; padding: 0; !important background-color: #ffffff;" bgcolor="#ffffff">
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="margin: 0 !important; padding: 0; !important background-color: #ffffff;" bgcolor="#ffffff">
<!-- HIDDEN PRE-HEADER TEXT -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0; max-width: 0; opacity: 0; overflow: hidden;">
{% if pre_header %}
{{ pre_header }}
{% endif %}
</div>
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0; max-width: 0; opacity: 0; overflow: hidden;">
{% if pre_header %}
{{ pre_header }}
{% endif %}
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" bgcolor="#3b4a69"
style="background: #3b4a69 url('{% static 'img/email_hd_bg.jpg' %}'); background-size: cover; padding: 50px 15px;"
class="mobile-padding">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" bgcolor="#3b4a69"
style="background: #3b4a69 url('{% static 'img/email_hd_bg.jpg' %}'); background-size: cover; padding: 50px 15px;"
class="mobile-padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding: 0 0 20px 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding: 0 0 20px 0;">
{% comment %}<!--Add a logo img in future-->{% endcomment %}
</td>
</tr>
<tr>
<td align="center" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h1 style="font-size: 28px; color: #ffffff;">{{ main_title }}</h1>
</td>
</tr>
<tr>
<td align="center" valign="top"
style="padding: 0 0 35px 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="80%"
style="max-width: 200px;">
<tr>
<td align="center" bgcolor="red"
style="color: #ffffff; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 14px; padding: 10px; border-radius: 3px 3px 0 0;">
{{ month_year }}
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"
style="color: #444444; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 48px; padding: 15px; border-radius: 0 0 3px 3px;">
{{ day }}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"
style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-bottom: 30px;">
</td>
</tr>
<tr>
<td align="center" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h1 style="font-size: 28px; color: #ffffff;">{{ main_title }}</h1>
</td>
</tr>
<tr>
<td align="center" valign="top"
style="padding: 0 0 35px 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="80%"
style="max-width: 200px;">
<tr>
<td align="center" bgcolor="red"
style="color: #ffffff; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 14px; padding: 10px; border-radius: 3px 3px 0 0;">
{{ month_year }}
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"
style="color: #444444; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 48px; padding: 15px; border-radius: 0 0 3px 3px;">
{{ day }}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"
style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-bottom: 30px;">
<p style="color: #ffffff; font-size: 14px; line-height: 24px; margin: 0;">
{% trans 'Thank you for choosing us.' %}
</p>
</td>
</tr>
<p style="color: #ffffff; font-size: 14px; line-height: 24px; margin: 0;">
{% trans 'Thank you for choosing us.' %}
</p>
</td>
</tr>
</table>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr style="max-width: 600px !important;">
<td align="center" valign="top" width="100%" bgcolor="#ffffff" style="padding: 50px 15px;"
class="mobile-padding">
</td>
</tr>
<tr style="max-width: 600px !important;">
<td align="center" valign="top" width="100%" bgcolor="#ffffff" style="padding: 50px 15px;"
class="mobile-padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;">
{% if account_details %}
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<p style="font-size: 14px; margin-top: 15px !important;">Hi {{ first_name }},</p>
<p style="font-size: 14px; margin-top: 5px !important;">{{ message_1 }}</p>
</td>
</tr>
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<p style="font-size: 14px; margin-top: 5px !important;">{{ message_2 }}</p>
</td>
</tr>
{% if activation_link %}
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;">
{% if account_details %}
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<p style="font-size: 14px; margin-top: 15px !important;">Hi {{ first_name }},</p>
<p style="font-size: 14px; margin-top: 5px !important;">{{ message_1 }}</p>
</td>
</tr>
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<p style="font-size: 14px; margin-top: 5px !important;">{{ message_2 }}</p>
</td>
</tr>
{% if activation_link %}
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h3>{% trans 'Account Activation' %}</h3>
<p style="font-size: 14px; margin-top: 15px !important;">
{% blocktranslate with link=activation_link %}
To activate your account and set your password, please use the following secure
link: <a href="{{ link }}" style="color: #1155cc;">Set Your Password</a>. Please
note that this link will expire in 2 days for your security.
{% endblocktranslate %}
</p>
</td>
<tr>
{% endif %}
</tr>
<tr>
<td align="left" valign="top"
style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 0;">
<h3>{% trans "Account Information" %}</h3>
<div style="color: #000000; font-size: 14px; line-height: 24px;">
<ul>
{% for key, value in account_details.items %}
<li>{{ key }}: {{ value }}</li>
{% endfor %}
</ul>
</div>
</td>
</tr>
{% endif %}
{% if more_details %}
<tr>
<td align="left" valign="top"
style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 0;">
<h3>{% trans "Appointment Details" %}</h3>
<div style="color: #000000; font-size: 14px; line-height: 24px;">
<ul>
{% for key, value in more_details.items %}
<li>{{ key }}: {{ value }}</li>
{% endfor %}
</ul>
</div>
</td>
</tr>
{% endif %}
{% if reschedule_link %}
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h3>{% trans 'Rescheduling' %}</h3>
<p style="margin-top: 15px !important; font-size: 14px">
{% translate 'If your plans change and you need to reschedule your appointment, you can easily do so by following this link: ' %}
<a href="{{ reschedule_link }}">
{% translate 'Reschedule Appointment' %}
</a>
</p>
</td>
</tr>
{% endif %}
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h3>{% trans 'Account Activation' %}</h3>
<p style="font-size: 14px; margin-top: 15px !important;">
{% blocktranslate with link=activation_link %}
To activate your account and set your password, please use the following secure
link: <a href="{{ link }}" style="color: #1155cc;">Set Your Password</a>. Please
note that this link will expire in 2 days for your security.
<h3>{% trans 'Support' %}</h3>
<p style="margin-top: 15px !important; font-size: 14px">
{% blocktranslate %}
Should you have any inquiries or require further assistance, our support team is here to
help. You can reach us anytime.
{% endblocktranslate %}
</p>
<p style="margin-top: 15px !important; font-size: 14px">
{% trans "We look forward to serving you and ensuring that your experience with us is both rewarding and satisfactory." %}
</p>
<p style="margin-top: 15px !important; font-size: 14px">{% trans "Warm regards" %},</p>
<p style="margin-top: 15px !important; font-size: 14px">{% trans "The Team" %}</p>
</td>
<tr>
{% endif %}
</tr>
<tr>
<td align="left" valign="top"
style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 0;">
<h3>{% trans "Account Information" %}</h3>
<div style="color: #000000; font-size: 14px; line-height: 24px;">
<ul>
{% for key, value in account_details.items %}
<li>{{ key }}: {{ value }}</li>
{% endfor %}
</ul>
</div>
</td>
</tr>
{% endif %}
{% if more_details %}
<tr>
<td align="left" valign="top"
style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 0;">
<h3>{% trans "Appointment Details" %}</h3>
<div style="color: #000000; font-size: 14px; line-height: 24px;">
<ul>
{% for key, value in more_details.items %}
<li>{{ key }}: {{ value }}</li>
{% endfor %}
</ul>
</div>
</td>
</tr>
{% endif %}
{% if reschedule_link %}
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h3>{% trans 'Rescheduling' %}</h3>
<p style="margin-top: 15px !important; font-size: 14px">
{% translate 'If your plans change and you need to reschedule your appointment, you can easily do so by following this link: ' %}
<a href="{{ reschedule_link }}">
{% translate 'Reschedule Appointment' %}
</a>
</p>
</td>
</tr>
{% endif %}
<tr>
<td align="left" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
<h3>{% trans 'Support' %}</h3>
<p style="margin-top: 15px !important; font-size: 14px">
{% blocktranslate %}
Should you have any inquiries or require further assistance, our support team is here to
help. You can reach us anytime.
{% endblocktranslate %}
</p>
<p style="margin-top: 15px !important; font-size: 14px">
{% trans "We look forward to serving you and ensuring that your experience with us is both rewarding and satisfactory." %}
</p>
<p style="margin-top: 15px !important; font-size: 14px">{% trans "Warm regards" %},</p>
<p style="margin-top: 15px !important; font-size: 14px">{% trans "The Team" %}</p>
</td>
</tr>
</table>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#f6f6f6" style="padding: 40px 15px;">
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#f6f6f6" style="padding: 40px 15px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
&copy; {{ current_year }} {{ company }}. {% trans "All rights reserved" %}.
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top"
style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
&copy; {{ current_year }} {{ company }}. {% trans "All rights reserved" %}.
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</body>
</html>

22
templates/errors/404.html
View File

@ -102,14 +102,14 @@
<div class="card-body chat p-0">
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a>
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a>
</div>
<div class="text-center mt-auto">
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../web_assets/img/team/30.webp" alt="" /></div>
@ -250,9 +250,9 @@
<div class="card-body d-flex align-items-center px-2 py-1">
<div class="position-relative rounded-start" style="height:34px;width:28px">
<div class="settings-popover"><span class="ripple"><span class="fa-spin position-absolute all-0 d-flex flex-center"><span class="icon-spin position-absolute all-0 d-flex flex-center">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7369 12.3941L19.1989 12.1065C18.4459 11.7041 18.0843 10.8487 18.0843 9.99495C18.0843 9.14118 18.4459 8.28582 19.1989 7.88336L19.7369 7.59581C19.9474 7.47484 20.0316 7.23291 19.9474 7.03131C19.4842 5.57973 18.6843 4.28943 17.6738 3.20075C17.5053 3.03946 17.2527 2.99914 17.0422 3.12011L16.393 3.46714C15.6883 3.84379 14.8377 3.74529 14.1476 3.3427C14.0988 3.31422 14.0496 3.28621 14.0002 3.25868C13.2568 2.84453 12.7055 2.10629 12.7055 1.25525V0.70081C12.7055 0.499202 12.5371 0.297594 12.2845 0.257272C10.7266 -0.105622 9.16879 -0.0653007 7.69516 0.257272C7.44254 0.297594 7.31623 0.499202 7.31623 0.70081V1.23474C7.31623 2.09575 6.74999 2.8362 5.99824 3.25599C5.95774 3.27861 5.91747 3.30159 5.87744 3.32493C5.15643 3.74527 4.26453 3.85902 3.53534 3.45302L2.93743 3.12011C2.72691 2.99914 2.47429 3.03946 2.30587 3.20075C1.29538 4.28943 0.495411 5.57973 0.0322686 7.03131C-0.051939 7.23291 0.0322686 7.47484 0.242788 7.59581L0.784376 7.8853C1.54166 8.29007 1.92694 9.13627 1.92694 9.99495C1.92694 10.8536 1.54166 11.6998 0.784375 12.1046L0.242788 12.3941C0.0322686 12.515 -0.051939 12.757 0.0322686 12.9586C0.495411 14.4102 1.29538 15.7005 2.30587 16.7891C2.47429 16.9504 2.72691 16.9907 2.93743 16.8698L3.58669 16.5227C4.29133 16.1461 5.14131 16.2457 5.8331 16.6455C5.88713 16.6767 5.94159 16.7074 5.99648 16.7375C6.75162 17.1511 7.31623 17.8941 7.31623 18.7552V19.2891C7.31623 19.4425 7.41373 19.5959 7.55309 19.696C7.64066 19.7589 7.74815 19.7843 7.85406 19.8046C9.35884 20.0925 10.8609 20.0456 12.2845 19.7729C12.5371 19.6923 12.7055 19.4907 12.7055 19.2891V18.7346C12.7055 17.8836 13.2568 17.1454 14.0002 16.7312C14.0496 16.7037 14.0988 16.6757 14.1476 16.6472C14.8377 16.2446 15.6883 16.1461 16.393 16.5227L17.0422 16.8698C17.2527 16.9907 17.5053 16.9504 17.6738 16.7891C18.7264 15.7005 19.4842 14.4102 19.9895 12.9586C20.0316 12.757 19.9474 12.515 19.7369 12.3941ZM10.0109 13.2005C8.1162 13.2005 6.64257 11.7893 6.64257 9.97478C6.64257 8.20063 8.1162 6.74905 10.0109 6.74905C11.8634 6.74905 13.3792 8.20063 13.3792 9.97478C13.3792 11.7893 11.8634 13.2005 10.0109 13.2005Z" fill="#2A7BE4"></path>
</svg></span></span></span></div>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7369 12.3941L19.1989 12.1065C18.4459 11.7041 18.0843 10.8487 18.0843 9.99495C18.0843 9.14118 18.4459 8.28582 19.1989 7.88336L19.7369 7.59581C19.9474 7.47484 20.0316 7.23291 19.9474 7.03131C19.4842 5.57973 18.6843 4.28943 17.6738 3.20075C17.5053 3.03946 17.2527 2.99914 17.0422 3.12011L16.393 3.46714C15.6883 3.84379 14.8377 3.74529 14.1476 3.3427C14.0988 3.31422 14.0496 3.28621 14.0002 3.25868C13.2568 2.84453 12.7055 2.10629 12.7055 1.25525V0.70081C12.7055 0.499202 12.5371 0.297594 12.2845 0.257272C10.7266 -0.105622 9.16879 -0.0653007 7.69516 0.257272C7.44254 0.297594 7.31623 0.499202 7.31623 0.70081V1.23474C7.31623 2.09575 6.74999 2.8362 5.99824 3.25599C5.95774 3.27861 5.91747 3.30159 5.87744 3.32493C5.15643 3.74527 4.26453 3.85902 3.53534 3.45302L2.93743 3.12011C2.72691 2.99914 2.47429 3.03946 2.30587 3.20075C1.29538 4.28943 0.495411 5.57973 0.0322686 7.03131C-0.051939 7.23291 0.0322686 7.47484 0.242788 7.59581L0.784376 7.8853C1.54166 8.29007 1.92694 9.13627 1.92694 9.99495C1.92694 10.8536 1.54166 11.6998 0.784375 12.1046L0.242788 12.3941C0.0322686 12.515 -0.051939 12.757 0.0322686 12.9586C0.495411 14.4102 1.29538 15.7005 2.30587 16.7891C2.47429 16.9504 2.72691 16.9907 2.93743 16.8698L3.58669 16.5227C4.29133 16.1461 5.14131 16.2457 5.8331 16.6455C5.88713 16.6767 5.94159 16.7074 5.99648 16.7375C6.75162 17.1511 7.31623 17.8941 7.31623 18.7552V19.2891C7.31623 19.4425 7.41373 19.5959 7.55309 19.696C7.64066 19.7589 7.74815 19.7843 7.85406 19.8046C9.35884 20.0925 10.8609 20.0456 12.2845 19.7729C12.5371 19.6923 12.7055 19.4907 12.7055 19.2891V18.7346C12.7055 17.8836 13.2568 17.1454 14.0002 16.7312C14.0496 16.7037 14.0988 16.6757 14.1476 16.6472C14.8377 16.2446 15.6883 16.1461 16.393 16.5227L17.0422 16.8698C17.2527 16.9907 17.5053 16.9504 17.6738 16.7891C18.7264 15.7005 19.4842 14.4102 19.9895 12.9586C20.0316 12.757 19.9474 12.515 19.7369 12.3941ZM10.0109 13.2005C8.1162 13.2005 6.64257 11.7893 6.64257 9.97478C6.64257 8.20063 8.1162 6.74905 10.0109 6.74905C11.8634 6.74905 13.3792 8.20063 13.3792 9.97478C13.3792 11.7893 11.8634 13.2005 10.0109 13.2005Z" fill="#2A7BE4"></path>
</svg></span></span></span></div>
</div><small class="text-uppercase text-body-tertiary fw-bold py-2 pe-2 ps-1 rounded-end">customize</small>
</div>
</a>

22
templates/errors/500.html
View File

@ -102,14 +102,14 @@
<div class="card-body chat p-0">
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a>
<p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
</a>
</div>
<div class="text-center mt-auto">
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../web_assets/img/team/30.webp" alt="" /></div>
@ -250,9 +250,9 @@
<div class="card-body d-flex align-items-center px-2 py-1">
<div class="position-relative rounded-start" style="height:34px;width:28px">
<div class="settings-popover"><span class="ripple"><span class="fa-spin position-absolute all-0 d-flex flex-center"><span class="icon-spin position-absolute all-0 d-flex flex-center">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7369 12.3941L19.1989 12.1065C18.4459 11.7041 18.0843 10.8487 18.0843 9.99495C18.0843 9.14118 18.4459 8.28582 19.1989 7.88336L19.7369 7.59581C19.9474 7.47484 20.0316 7.23291 19.9474 7.03131C19.4842 5.57973 18.6843 4.28943 17.6738 3.20075C17.5053 3.03946 17.2527 2.99914 17.0422 3.12011L16.393 3.46714C15.6883 3.84379 14.8377 3.74529 14.1476 3.3427C14.0988 3.31422 14.0496 3.28621 14.0002 3.25868C13.2568 2.84453 12.7055 2.10629 12.7055 1.25525V0.70081C12.7055 0.499202 12.5371 0.297594 12.2845 0.257272C10.7266 -0.105622 9.16879 -0.0653007 7.69516 0.257272C7.44254 0.297594 7.31623 0.499202 7.31623 0.70081V1.23474C7.31623 2.09575 6.74999 2.8362 5.99824 3.25599C5.95774 3.27861 5.91747 3.30159 5.87744 3.32493C5.15643 3.74527 4.26453 3.85902 3.53534 3.45302L2.93743 3.12011C2.72691 2.99914 2.47429 3.03946 2.30587 3.20075C1.29538 4.28943 0.495411 5.57973 0.0322686 7.03131C-0.051939 7.23291 0.0322686 7.47484 0.242788 7.59581L0.784376 7.8853C1.54166 8.29007 1.92694 9.13627 1.92694 9.99495C1.92694 10.8536 1.54166 11.6998 0.784375 12.1046L0.242788 12.3941C0.0322686 12.515 -0.051939 12.757 0.0322686 12.9586C0.495411 14.4102 1.29538 15.7005 2.30587 16.7891C2.47429 16.9504 2.72691 16.9907 2.93743 16.8698L3.58669 16.5227C4.29133 16.1461 5.14131 16.2457 5.8331 16.6455C5.88713 16.6767 5.94159 16.7074 5.99648 16.7375C6.75162 17.1511 7.31623 17.8941 7.31623 18.7552V19.2891C7.31623 19.4425 7.41373 19.5959 7.55309 19.696C7.64066 19.7589 7.74815 19.7843 7.85406 19.8046C9.35884 20.0925 10.8609 20.0456 12.2845 19.7729C12.5371 19.6923 12.7055 19.4907 12.7055 19.2891V18.7346C12.7055 17.8836 13.2568 17.1454 14.0002 16.7312C14.0496 16.7037 14.0988 16.6757 14.1476 16.6472C14.8377 16.2446 15.6883 16.1461 16.393 16.5227L17.0422 16.8698C17.2527 16.9907 17.5053 16.9504 17.6738 16.7891C18.7264 15.7005 19.4842 14.4102 19.9895 12.9586C20.0316 12.757 19.9474 12.515 19.7369 12.3941ZM10.0109 13.2005C8.1162 13.2005 6.64257 11.7893 6.64257 9.97478C6.64257 8.20063 8.1162 6.74905 10.0109 6.74905C11.8634 6.74905 13.3792 8.20063 13.3792 9.97478C13.3792 11.7893 11.8634 13.2005 10.0109 13.2005Z" fill="#2A7BE4"></path>
</svg></span></span></span></div>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
<path d="M19.7369 12.3941L19.1989 12.1065C18.4459 11.7041 18.0843 10.8487 18.0843 9.99495C18.0843 9.14118 18.4459 8.28582 19.1989 7.88336L19.7369 7.59581C19.9474 7.47484 20.0316 7.23291 19.9474 7.03131C19.4842 5.57973 18.6843 4.28943 17.6738 3.20075C17.5053 3.03946 17.2527 2.99914 17.0422 3.12011L16.393 3.46714C15.6883 3.84379 14.8377 3.74529 14.1476 3.3427C14.0988 3.31422 14.0496 3.28621 14.0002 3.25868C13.2568 2.84453 12.7055 2.10629 12.7055 1.25525V0.70081C12.7055 0.499202 12.5371 0.297594 12.2845 0.257272C10.7266 -0.105622 9.16879 -0.0653007 7.69516 0.257272C7.44254 0.297594 7.31623 0.499202 7.31623 0.70081V1.23474C7.31623 2.09575 6.74999 2.8362 5.99824 3.25599C5.95774 3.27861 5.91747 3.30159 5.87744 3.32493C5.15643 3.74527 4.26453 3.85902 3.53534 3.45302L2.93743 3.12011C2.72691 2.99914 2.47429 3.03946 2.30587 3.20075C1.29538 4.28943 0.495411 5.57973 0.0322686 7.03131C-0.051939 7.23291 0.0322686 7.47484 0.242788 7.59581L0.784376 7.8853C1.54166 8.29007 1.92694 9.13627 1.92694 9.99495C1.92694 10.8536 1.54166 11.6998 0.784375 12.1046L0.242788 12.3941C0.0322686 12.515 -0.051939 12.757 0.0322686 12.9586C0.495411 14.4102 1.29538 15.7005 2.30587 16.7891C2.47429 16.9504 2.72691 16.9907 2.93743 16.8698L3.58669 16.5227C4.29133 16.1461 5.14131 16.2457 5.8331 16.6455C5.88713 16.6767 5.94159 16.7074 5.99648 16.7375C6.75162 17.1511 7.31623 17.8941 7.31623 18.7552V19.2891C7.31623 19.4425 7.41373 19.5959 7.55309 19.696C7.64066 19.7589 7.74815 19.7843 7.85406 19.8046C9.35884 20.0925 10.8609 20.0456 12.2845 19.7729C12.5371 19.6923 12.7055 19.4907 12.7055 19.2891V18.7346C12.7055 17.8836 13.2568 17.1454 14.0002 16.7312C14.0496 16.7037 14.0988 16.6757 14.1476 16.6472C14.8377 16.2446 15.6883 16.1461 16.393 16.5227L17.0422 16.8698C17.2527 16.9907 17.5053 16.9504 17.6738 16.7891C18.7264 15.7005 19.4842 14.4102 19.9895 12.9586C20.0316 12.757 19.9474 12.515 19.7369 12.3941ZM10.0109 13.2005C8.1162 13.2005 6.64257 11.7893 6.64257 9.97478C6.64257 8.20063 8.1162 6.74905 10.0109 6.74905C11.8634 6.74905 13.3792 8.20063 13.3792 9.97478C13.3792 11.7893 11.8634 13.2005 10.0109 13.2005Z" fill="#2A7BE4"></path>
</svg></span></span></span></div>
</div><small class="text-uppercase text-body-tertiary fw-bold py-2 pe-2 ps-1 rounded-end">customize</small>
</div>
</a>

12
templates/footer.html
View File

@ -2,16 +2,16 @@
<footer class="footer position-absolute fs-9">
<div class="row g-0 justify-content-between align-items-center h-100">
<div class="col-12 col-sm-auto text-center">
<span class="text-body"> © 2025 {{ _("All right reserved")}}</span>
<span class="fw-bold">Haikal</span>&nbsp;|&nbsp;<span class="fw-bold">هيكل</span>
<span class="text-body"> © 2025 {{ _("All right reserved")}}</span>
<span class="fw-bold">Haikal</span>&nbsp;|&nbsp;<span class="fw-bold">هيكل</span>
</div>
<div class="col-12 col-sm-auto text-center">
<span class="fw-light text-body-tertiary text-opacity-85">{{ _("Powered by")}} </span>
<a class="mx-1 text-decoration-none text-body-highlight" href="https://tenhal.sa">
<span class="fw-light text-body-tertiary text-opacity-85">{{ _("Powered by")}} </span>
<a class="mx-1 text-decoration-none text-body-highlight" href="https://tenhal.sa">
<span>TENHAL</span>&nbsp;|&nbsp;<span>تنحل</span>
</a>
<span class="uil-trademark-circle fs-10 fw-light text-body-tertiary text-opacity-85"></span>
</a>
<span class="uil-trademark-circle fs-10 fw-light text-body-tertiary text-opacity-85"></span>
</div>
</div>
</footer>

132
templates/groups/group_detail.html
View File

@ -36,84 +36,84 @@
</div>
</div>
<div class="row my-5">
<div class="card rounded ">
<div class="card-header ">
<p class="mb-0">{{ _("Group Details") }}</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<p><strong>{{ _("Name") }}:</strong> {{ group.name }}</p>
</div>
<div class="col-md-6">
<table class="table table-hover table-responsive-sm fs-9 mb-0">
<thead>
<tr>
<th><h4>{% trans 'Users'|capfirst %}</h4></th>
<th></th>
</tr>
</thead>
<tbody>
{% for user in group.users %}
<tr>
<td><p><strong>{{ _("Name") }}:</strong> {{ user.staffmember.staff }}</p></td>
<td><p><strong>{{ _("Email") }}:</strong> {{ user }}</p></td>
</tr>
{% empty %}
<tr>
<td>{% trans "No Permissions" %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="table-responsive scrollbar mx-n1 px-1">
<div class="card-header ">
<div class="row my-5">
<div class="card rounded ">
<div class="card-header ">
<p class="mb-0">{{ _("Group Details") }}</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<p><strong>{{ _("Name") }}:</strong> {{ group.name }}</p>
</div>
<h4 class="my-4">Permissions</h4>
<div class="col-md-6">
<table class="table table-hover table-responsive-sm fs-9 mb-0">
<thead>
<tr>
<th><h4>{% trans 'Users'|capfirst %}</h4></th>
<th></th>
</tr>
</thead>
<tbody>
{% for user in group.users %}
<tr>
<td><p><strong>{{ _("Name") }}:</strong> {{ user.staffmember.staff }}</p></td>
<td><p><strong>{{ _("Email") }}:</strong> {{ user }}</p></td>
</tr>
{% empty %}
<tr>
<td>{% trans "No Permissions" %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="table-responsive scrollbar mx-n1 px-1">
<div class="card-header ">
</div>
<h4 class="my-4">Permissions</h4>
<a class="btn btn-sm btn-primary mt-2 mb-4" href="{% url 'group_permission' group.id %}"><i class="fa-solid fa-unlock"></i> Manage Permissions</a>
<table class="table table-hover table-responsive-sm fs-9 mb-0">
<table class="table table-hover table-responsive-sm fs-9 mb-0">
<thead>
<tr>
<th>{% trans 'name'|capfirst %}</th>
<th>{% trans 'Action'|capfirst %}</th>
<th>{% trans 'name'|capfirst %}</th>
<th>{% trans 'Action'|capfirst %}</th>
</tr>
</thead>
<tbody>
{% for permission in group.permissions %}
<tr>
<td>{{ permission.codename }}</td>
<td>{{ permission.name }}</td>
</tr>
<tr>
<td>{{ permission.codename }}</td>
<td>{{ permission.name }}</td>
</tr>
{% empty %}
<tr>
<td>{% trans "No Permissions" %}</td>
</tr>
<tr>
<td>{% trans "No Permissions" %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card-footer d-flex ">
<a class="btn btn-sm btn-primary me-1" href="{% url 'group_update' group.id %}">
<i class="fa-solid fa-pen-to-square"></i>
{{ _("Edit") }}
</a>
<a class="btn btn-sm btn-danger me-1"
data-bs-toggle="modal"
data-bs-target="#deleteModal">
<i class="fa-solid fa-trash"></i>
{{ _("Delete") }}
</a>
<a class="btn btn-sm btn-secondary"
href="{% url 'group_list' %}">
<i class="fa-solid fa-arrow-left"></i>
{% trans "Back to List" %}
</a>
</div>
</div>
</div>
<div class="card-footer d-flex ">
<a class="btn btn-sm btn-primary me-1" href="{% url 'group_update' group.id %}">
<i class="fa-solid fa-pen-to-square"></i>
{{ _("Edit") }}
</a>
<a class="btn btn-sm btn-danger me-1"
data-bs-toggle="modal"
data-bs-target="#deleteModal">
<i class="fa-solid fa-trash"></i>
{{ _("Delete") }}
</a>
<a class="btn btn-sm btn-secondary"
href="{% url 'group_list' %}">
<i class="fa-solid fa-arrow-left"></i>
{% trans "Back to List" %}
</a>
</div>
</div>
</div>
{% endblock %}

64
templates/groups/group_form.html
View File

@ -6,40 +6,40 @@
{% block content %}
<div class="row">
<div class="row">
<div class="col-sm-9">
<div class="d-sm-flex justify-content-between">
<h3 class="mb-3">
{% if staff.created %}
{{ _("Edit Group") }}
{% else %}
{{ _("Add Group") }}
{% endif %}
</h3>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-sm-9">
<div class="col-sm-9">
<div class="d-sm-flex justify-content-between">
<form class="row g-3 mb-9" method="post" class="form" novalidate>
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
{% for error in form.errors %}
<div class="text-danger">{{ error }}</div>
{% endfor %}
<div class="d-flex mb-3">
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-phoenix-primary me-2 px-6"><i class="fa-solid fa-ban"></i> {% trans "Cancel"|capfirst %}</a>
<button class="btn btn-primary" type="submit">
<i class="fa-solid fa-floppy-disk"></i>
{{ _("Save") }}
</button>
<h3 class="mb-3">
{% if staff.created %}
{{ _("Edit Group") }}
{% else %}
{{ _("Add Group") }}
{% endif %}
</h3>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9">
<form class="row g-3 mb-9" method="post" class="form" novalidate>
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
{% for error in form.errors %}
<div class="text-danger">{{ error }}</div>
{% endfor %}
<div class="d-flex mb-3">
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-phoenix-primary me-2 px-6"><i class="fa-solid fa-ban"></i> {% trans "Cancel"|capfirst %}</a>
<button class="btn btn-primary" type="submit">
<i class="fa-solid fa-floppy-disk"></i>
{{ _("Save") }}
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

84
templates/groups/group_list.html
View File

@ -5,53 +5,53 @@
{% block title %}{% trans "Group" %}{% endblock title %}
{% block content %}
<section class="">
<section class="">
<div class="row">
<div class="col-auto">
<div class="col-auto">
<div class="d-md-flex justify-content-between">
<div>
<a href="{% url 'group_create' %}" class="btn btn-sm btn-phoenix-primary"><span class="fas fa-plus me-2"></span>{% trans "Add Group" %}</a>
<div>
<a href="{% url 'group_create' %}" class="btn btn-sm btn-phoenix-primary"><span class="fas fa-plus me-2"></span>{% trans "Add Group" %}</a>
</div>
</div>
</div>
</div>
<div class="table-responsive scrollbar mx-n1 px-1">
</div>
<div class="table-responsive scrollbar mx-n1 px-1">
<table class="table table-hover table-responsive-sm fs-9 mb-0">
<thead>
<tr>
<th>{% trans 'name'|capfirst %}</th>
<th>{% trans 'total Users'|capfirst %}</th>
<th>{% trans 'total permission'|capfirst %}</th>
<th>{% trans 'actions'|capfirst %}</th>
</tr>
</thead>
<tbody>
{% for group in groups %}
<tr>
<td>{{ group.name }}</td>
<td><i class="fa-solid fa-users"></i> {{ group.users.count }}</td>
<td><i class="fa-solid fa-unlock"></i> {{ group.permissions.count }}</td>
<td>
<a class="btn btn-phoenix-success"
href="{% url 'group_detail' group.id %}">
<i class="fa-solid fa-eye"></i>
{% trans 'view'|capfirst %}
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="d-flex justify-content-center">
{% if is_paginated %}
{% include 'partials/pagination.html' %}
{% endif %}
</div>
</div>
</section>
<table class="table table-hover table-responsive-sm fs-9 mb-0">
<thead>
<tr>
<th>{% trans 'name'|capfirst %}</th>
<th>{% trans 'total Users'|capfirst %}</th>
<th>{% trans 'total permission'|capfirst %}</th>
<th>{% trans 'actions'|capfirst %}</th>
</tr>
</thead>
<tbody>
{% for group in groups %}
<tr>
<td>{{ group.name }}</td>
<td><i class="fa-solid fa-users"></i> {{ group.users.count }}</td>
<td><i class="fa-solid fa-unlock"></i> {{ group.permissions.count }}</td>
<td>
<a class="btn btn-phoenix-success"
href="{% url 'group_detail' group.id %}">
<i class="fa-solid fa-eye"></i>
{% trans 'view'|capfirst %}
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="d-flex justify-content-center">
{% if is_paginated %}
{% include 'partials/pagination.html' %}
{% endif %}
</div>
</div>
</section>
{% endblock %}

64
templates/groups/group_permission_form.html
View File

@ -6,40 +6,40 @@
{% block content %}
<div class="row">
<div class="row">
<div class="col-sm-9">
<div class="d-sm-flex justify-content-between">
<h3 class="mb-3">
{% if group.created %}
{{ _("Edit Permission") }}
{% else %}
{{ _("Add Permission") }}
{% endif %}
</h3>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-sm-9">
<div class="col-sm-9">
<div class="d-sm-flex justify-content-between">
<form class="row g-3 mb-9" method="post" class="form" novalidate>
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
{% for error in form.errors %}
<div class="text-danger">{{ error }}</div>
{% endfor %}
<div class="d-flex mb-3">
<a href="{% url 'group_detail' group.pk %}" class="btn btn-phoenix-primary me-2 px-6"><i class="fa-solid fa-ban"></i> {% trans "Cancel"|capfirst %}</a>
<button class="btn btn-primary" type="submit">
<i class="fa-solid fa-floppy-disk"></i>
{{ _("Save") }}
</button>
<h3 class="mb-3">
{% if group.created %}
{{ _("Edit Permission") }}
{% else %}
{{ _("Add Permission") }}
{% endif %}
</h3>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9">
<form class="row g-3 mb-9" method="post" class="form" novalidate>
{% csrf_token %}
{{ redirect_field }}
{{ form|crispy }}
{% for error in form.errors %}
<div class="text-danger">{{ error }}</div>
{% endfor %}
<div class="d-flex mb-3">
<a href="{% url 'group_detail' group.pk %}" class="btn btn-phoenix-primary me-2 px-6"><i class="fa-solid fa-ban"></i> {% trans "Cancel"|capfirst %}</a>
<button class="btn btn-primary" type="submit">
<i class="fa-solid fa-floppy-disk"></i>
{{ _("Save") }}
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

150
templates/haikalbot/chatbot.html
View File

@ -4,86 +4,86 @@
{% block title %}{{ _("HaikalBot") }}{% endblock title %}
{% block content %}
<style>
<style>
#chatbox {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
height: 200px;
overflow-y: scroll;
}
</style>
<div class="row p-2">
<div class="card shadow-sm rounded shadow">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">{% trans 'HaikalBot' %}</h4>
</div>
<div class="card-body">
<div id="chatbox">
<p><b>{% trans 'HaikalBot' %}:</b> {% trans 'Hello! How can I assist you today?' %}</p>
</div>
<label for="userMessage"></label>
<input class="form-control form-control-sm"
type="text" id="userMessage"
placeholder="{% trans 'Type your message here...' %}" />
<button class="btn btn-sm btn-success m-2" onclick="sendMessage()">{% trans 'Send' %}</button>
</div>
</div>
<!-- Script to send to api -->
<script>
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
#chatbox {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
height: 200px;
overflow-y: scroll;
}
}
return cookieValue;
}
const csrfToken = getCookie('csrftoken');
async function sendMessage() {
const userMessage = document.getElementById("userMessage").value;
</style>
if (!userMessage.trim()) {
alert("Please enter a message.");
return;
}
<div class="row p-2">
<div class="card shadow-sm rounded shadow">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">{% trans 'HaikalBot' %}</h4>
</div>
<div class="card-body">
const response = await fetch("", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": csrfToken,
},
body: JSON.stringify({ message: userMessage }),
});
<div id="chatbox">
<p><b>{% trans 'HaikalBot' %}:</b> {% trans 'Hello! How can I assist you today?' %}</p>
</div>
<label for="userMessage"></label>
<input class="form-control form-control-sm"
type="text" id="userMessage"
placeholder="{% trans 'Type your message here...' %}" />
<button class="btn btn-sm btn-success m-2" onclick="sendMessage()">{% trans 'Send' %}</button>
</div>
</div>
if (response) {
const data = await response.json();
const chatbox = document.getElementById("chatbox");
chatbox.innerHTML += `<p><b>{% trans 'You' %}:</b> ${userMessage}</p>`;
chatbox.innerHTML += `<p><b>{% trans 'HaikalBot' %}:</b> ${data.response}</p>`;
document.getElementById("userMessage").value = "";
chatbox.scrollTop = chatbox.scrollHeight;
} else {
alert("An error occurred.");
}
}
</script>
<!-- Script to send to api -->
<script>
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
</div>
const csrfToken = getCookie('csrftoken');
async function sendMessage() {
const userMessage = document.getElementById("userMessage").value;
if (!userMessage.trim()) {
alert("Please enter a message.");
return;
}
const response = await fetch("", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": csrfToken,
},
body: JSON.stringify({ message: userMessage }),
});
if (response) {
const data = await response.json();
const chatbox = document.getElementById("chatbox");
chatbox.innerHTML += `<p><b>{% trans 'You' %}:</b> ${userMessage}</p>`;
chatbox.innerHTML += `<p><b>{% trans 'HaikalBot' %}:</b> ${data.response}</p>`;
document.getElementById("userMessage").value = "";
chatbox.scrollTop = chatbox.scrollHeight;
} else {
alert("An error occurred.");
}
}
</script>
</div>
{% endblock content %}

741
templates/header.html
View File

@ -1,165 +1,172 @@
{% load i18n static %}
{% if user.is_authenticated %}
<nav class="navbar navbar-vertical navbar-expand-lg">
<div class="collapse navbar-collapse" id="navbarVerticalCollapse">
<div class="navbar-vertical-content">
<ul class="navbar-nav flex-column" id="navbarVerticalNav">
<nav class="navbar navbar-vertical navbar-expand-lg">
<div class="collapse navbar-collapse" id="navbarVerticalCollapse">
<div class="navbar-vertical-content">
<ul class="navbar-nav flex-column" id="navbarVerticalNav">
<li class="nav-item">
<p class="navbar-vertical-label">Apps</p>
<hr class="navbar-vertical-line" />
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-inventory" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-inventory">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><span class="fas fa-warehouse"></span></span><span class="nav-link-text">{% trans "Inventory"|capfirst %}</span>
</div>
</a>
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-inventory">
<li class="collapsed-nav-item-title d-none">{% trans "Inventory"|capfirst %}</li>
{% if perms.inventory.add_car %}
<li class="nav-item">
<p class="navbar-vertical-label">Apps</p>
<hr class="navbar-vertical-line" />
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-inventory" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-inventory">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><span class="fas fa-warehouse"></span></span><span class="nav-link-text">{% trans "Inventory"|capfirst %}</span>
</div>
</a>
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-inventory">
<li class="collapsed-nav-item-title d-none">{% trans "Inventory"|capfirst %}</li>
{% if perms.inventory.add_car %}
<li class="nav-item">
<a class="nav-link" href="{% url 'car_add' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-plus-circle"></span></span><span class="nav-link-text">{% trans "add car"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'car_add' %}">
<a class="nav-link" href="{% url 'inventory_stats' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-plus-circle"></span></span><span class="nav-link-text">{% trans "add car"|capfirst %}</span>
<span class="nav-link-icon"><span class="fas fa-car-side"></span></span><span class="nav-link-text">{% trans 'Cars'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'inventory_stats' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-car-side"></span></span><span class="nav-link-text">{% trans 'Cars'|capfirst %}</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'car_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-car-side"></span></span><span class="nav-link-text">{% trans 'Stock'|capfirst %}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
{% if perms.inventory.view_lead %}
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-sales" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-sales">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><span data-feather="shopping-cart"></span></span><span class="nav-link-text">{% trans 'sales'|capfirst %}</span>
<li class="nav-item">
<a class="nav-link" href="{% url 'car_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-car-side"></span></span><span class="nav-link-text">{% trans 'Stock'|capfirst %}</span>
</div>
</a>
</li>
</ul>
</div>
</a>
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-sales">
<li class="collapsed-nav-item-title d-none">{% trans 'sales'|capfirst %}</li>
{% if perms.django_ledger.add_estimatemodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'estimate_create' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-list-ul"></span></span><span class="nav-link-text">{% trans "create quotation"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_estimatemodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'estimate_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-clipboard-list"></span></span><span class="nav-link-text">{% trans "quotations"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.inventory.view_saleorder %}
<li class="nav-item">
<a class="nav-link" href="{% url 'order_list_view' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-cart-plus"></span></span><span class="nav-link-text">{% trans "orders"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_invoicemodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'invoice_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-file-invoice"></span></span><span class="nav-link-text">{% trans "invoices"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_journalentrymodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'payment_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-money-check"></span></span><span class="nav-link-text">{% trans "payments"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'sales_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-money-check"></span></span><span class="nav-link-text">{% trans "Sales"|capfirst %}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
{% endif %}
{% if perms.django_ledger.view_customermodel %}
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-crm" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-crm">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><span data-feather="phone"></span></span><span class="nav-link-text">{% trans 'crm'|upper %}</span>
{% if perms.inventory.view_lead %}
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-sales" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-sales">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><span data-feather="shopping-cart"></span></span><span class="nav-link-text">{% trans 'sales'|capfirst %}</span>
</div>
</a>
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-sales">
<li class="collapsed-nav-item-title d-none">{% trans 'sales'|capfirst %}</li>
{% if perms.django_ledger.add_estimatemodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'estimate_create' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-list-ul"></span></span><span class="nav-link-text">{% trans "create quotation"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_estimatemodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'estimate_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-clipboard-list"></span></span><span class="nav-link-text">{% trans "quotations"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.inventory.view_saleorder %}
<li class="nav-item">
<a class="nav-link" href="{% url 'order_list_view' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-cart-plus"></span></span><span class="nav-link-text">{% trans "orders"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_invoicemodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'invoice_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-file-invoice"></span></span><span class="nav-link-text">{% trans "invoices"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_journalentrymodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'payment_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-money-check"></span></span><span class="nav-link-text">{% trans "payments"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'sales_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-money-check"></span></span><span class="nav-link-text">{% trans "Sales"|capfirst %}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</a>
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-crm">
<li class="collapsed-nav-item-title d-none">{% trans 'crm'|upper %}</li>
{% if perms.inventory.view_lead %}
<li class="nav-item">
<a class="nav-link" href="{% url 'lead_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'leads'|capfirst %}</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'lead_tracking' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'leads Tracking'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_customermodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'customer_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'customers'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'organization_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-city"></span></span><span class="nav-link-text">{% trans "Organizations"|capfirst %}</span>
</div>
</a>
{% endif %}
</li>
{% if perms.django_ledger.view_customermodel %}
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-crm" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-crm">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><span data-feather="phone"></span></span><span class="nav-link-text">{% trans 'crm'|upper %}</span>
</div>
</a>
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-crm">
<li class="collapsed-nav-item-title d-none">{% trans 'crm'|upper %}</li>
{% if perms.inventory.view_lead %}
<li class="nav-item">
<a class="nav-link" href="{% url 'lead_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'leads'|capfirst %}</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'lead_tracking' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'leads Tracking'|capfirst %}</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'opportunity_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'Opportunity'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_customermodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'customer_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'customers'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'organization_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-city"></span></span><span class="nav-link-text">{% trans "Organizations"|capfirst %}</span>
</div>
</a>
</li>
{% comment %} <li class="nav-item">
<a class="nav-link" href="{% url 'representative_list' %}">
<div class="d-flex align-items-center">
@ -174,104 +181,104 @@
</div>
</a>
</li> {% endcomment %}
</ul>
</div>
</div>
{% endif %}
{% if perms.django_ledger.view_accountmodel %}
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-financial" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-financial">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><span class="fas fa-money-check-alt"></span></span><span class="nav-link-text">{% trans 'Financials' %}</span>
</ul>
</div>
</a>
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-financial">
<li class="collapsed-nav-item-title d-none">{% trans 'Financials' %}</li>
{% if perms.django_ledger.view_accountmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'account_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-book-open"></span></span><span class="nav-link-text">{% trans 'Chart of Accounts'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_bankaccountmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'bank_account_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="credit-card"></span></span><span class="nav-link-text">{% trans 'Bank Accounts'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_itemmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'ledger_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-book"></span></span><span class="nav-link-text">{% trans "Ledgers"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'item_service_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="activity"></span></span><span class="nav-link-text">{% trans "Services"|capfirst %}</span>
</div>
</a>
</li>
{% if perms.django_ledger.view_itemmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'item_expense_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-users-cog"></span></span><span class="nav-link-text">{% trans "Expenses"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_vendormodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'vendor_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="package"></span></span><span class="nav-link-text">{% trans 'vendors'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_billmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'bill_list' %}">
<div class="d-flex align-items-center">
<span><i class="fa-solid fa-money-bills"></i></span><span class="nav-link-text">{% trans 'bills'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
</ul>
</div>
</div>
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-reports" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-reports">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><i class="fa-solid fa-book-open"></i></span><span class="nav-link-text">{% trans 'Reports' %}</span>
</div>
</a>
{% if perms.django_ledger.view_accountmodel %}
{% endif %}
{% if perms.django_ledger.view_accountmodel %}
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-financial" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-financial">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><span class="fas fa-money-check-alt"></span></span><span class="nav-link-text">{% trans 'Financials' %}</span>
</div>
</a>
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-reports">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-financial">
<li class="collapsed-nav-item-title d-none">{% trans 'Financials' %}</li>
{% if perms.django_ledger.view_accountmodel %}
<li class="nav-item">
{% if request.user.is_authenticated and request.is_dealer %}
<a class="nav-link" href="{% url 'entity-dashboard' request.user.dealer.entity.slug %}">
{% elif request.user.is_authenticated and request.is_staff %}
<a class="nav-link" href="{% url 'entity-dashboard' request.user.staffmember.staff.dealer.entity.slug %}">
{% else %}
<a class="nav-link" href="#">
{% endif %}
<a class="nav-link" href="{% url 'account_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-book-open"></span></span><span class="nav-link-text">{% trans 'Chart of Accounts'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_bankaccountmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'bank_account_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="credit-card"></span></span><span class="nav-link-text">{% trans 'Bank Accounts'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_itemmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'ledger_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-book"></span></span><span class="nav-link-text">{% trans "Ledgers"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'item_service_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="activity"></span></span><span class="nav-link-text">{% trans "Services"|capfirst %}</span>
</div>
</a>
</li>
{% if perms.django_ledger.view_itemmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'item_expense_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span class="fas fa-users-cog"></span></span><span class="nav-link-text">{% trans "Expenses"|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_vendormodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'vendor_list' %}">
<div class="d-flex align-items-center">
<span class="nav-link-icon"><span data-feather="package"></span></span><span class="nav-link-text">{% trans 'vendors'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
{% if perms.django_ledger.view_billmodel %}
<li class="nav-item">
<a class="nav-link" href="{% url 'bill_list' %}">
<div class="d-flex align-items-center">
<span><i class="fa-solid fa-money-bills"></i></span><span class="nav-link-text">{% trans 'bills'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
</ul>
</div>
</div>
<div class="nav-item-wrapper">
<a class="nav-link dropdown-indicator label-1" href="#nv-reports" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-reports">
<div class="d-flex align-items-center">
<div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
<span class="nav-link-icon"><i class="fa-solid fa-book-open"></i></span><span class="nav-link-text">{% trans 'Reports' %}</span>
</div>
</a>
{% if perms.django_ledger.view_accountmodel %}
<div class="parent-wrapper label-1">
<ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-reports">
<li class="nav-item">
{% if request.user.is_authenticated and request.is_dealer %}
<a class="nav-link" href="{% url 'entity-dashboard' request.user.dealer.entity.slug %}">
{% elif request.user.is_authenticated and request.is_staff %}
<a class="nav-link" href="{% url 'entity-dashboard' request.user.staffmember.staff.dealer.entity.slug %}">
{% else %}
<a class="nav-link" href="#">
{% endif %}
<div class="d-flex align-items-center">
{% comment %} <i class="fa-solid fa-chart-line"></i><span class="nav-link-text">{% trans 'Dashboard'|capfirst %}</span> {% endcomment %}
</div>
@ -283,48 +290,48 @@
{% else %}
<a class="nav-link" href="#">
{% endif %}
<div class="d-flex align-items-center">
<i class="fa-solid fa-sack-dollar"></i><span class="nav-link-text">{% trans 'Cash Flow'|capfirst %}</span>
</div>
</a>
{% if request.user.is_authenticated and request.is_dealer %}
<div class="d-flex align-items-center">
<i class="fa-solid fa-sack-dollar"></i><span class="nav-link-text">{% trans 'Cash Flow'|capfirst %}</span>
</div>
</a>
{% if request.user.is_authenticated and request.is_dealer %}
<a class="nav-link" href="{% url 'entity-ic' request.user.dealer.entity.slug %}">
{% elif request.user.is_authenticated and request.is_staff %}
{% elif request.user.is_authenticated and request.is_staff %}
<a class="nav-link" href="{% url 'entity-ic' request.user.staffmember.staff.dealer.entity.slug %}">
{% else %}
{% else %}
<a class="nav-link" href="#">
{% endif %}
<div class="d-flex align-items-center">
<i class="fa-solid fa-sheet-plastic"></i><span class="nav-link-text">{% trans 'Income Statement'|capfirst %}</span>
</div>
</a>
{% if request.user.is_authenticated and request.is_dealer %}
<a class="nav-link" href="{% url 'entity-bs' request.user.dealer.entity.slug %}">
{% elif request.user.is_authenticated and request.is_staff %}
<a class="nav-link" href="{% url 'entity-bs' request.user.staffmember.staff.dealer.entity.slug %}">
{% else %}
<a class="nav-link" href="#">
{% endif %}
<div class="d-flex align-items-center">
<i class="fa-solid fa-scale-balanced"></i><span class="nav-link-text">{% trans 'Balance Sheet'|capfirst %}</span>
</div>
</a>
</li>
{% endif %}
<div class="d-flex align-items-center">
<i class="fa-solid fa-sheet-plastic"></i><span class="nav-link-text">{% trans 'Income Statement'|capfirst %}</span>
</div>
</a>
{% if request.user.is_authenticated and request.is_dealer %}
<a class="nav-link" href="{% url 'entity-bs' request.user.dealer.entity.slug %}">
{% elif request.user.is_authenticated and request.is_staff %}
<a class="nav-link" href="{% url 'entity-bs' request.user.staffmember.staff.dealer.entity.slug %}">
{% else %}
<a class="nav-link" href="#">
{% endif %}
<div class="d-flex align-items-center">
<i class="fa-solid fa-scale-balanced"></i><span class="nav-link-text">{% trans 'Balance Sheet'|capfirst %}</span>
</div>
</a>
</li>
</ul>
</div>
{% endif %}
</div>
{% endif %}
</li>
</ul>
</div>
{% endif %}
</div>
{% endif %}
</li>
</ul>
</div>
</div>
</div>
<div class="navbar-vertical-footer">
<button class="btn navbar-vertical-toggle border-0 fw-semibold w-100 white-space-nowrap d-flex align-items-center">
<span class="uil uil-left-arrow-to-left fs-8"></span><span class="uil uil-arrow-from-right fs-8"></span><span class="navbar-vertical-footer-text ms-2">Collapsed View</span>
</button>
</div>
</nav>
<div class="navbar-vertical-footer">
<button class="btn navbar-vertical-toggle border-0 fw-semibold w-100 white-space-nowrap d-flex align-items-center">
<span class="uil uil-left-arrow-to-left fs-8"></span><span class="uil uil-arrow-from-right fs-8"></span><span class="navbar-vertical-footer-text ms-2">Collapsed View</span>
</button>
</div>
</nav>
{% endif %}
<nav class="navbar navbar-top fixed-top navbar-expand" id="navbarDefault">
@ -352,113 +359,113 @@
<ul class="navbar-nav navbar-nav-icons flex-row gap-2">
<li class="nav-item">
<div class="theme-control-toggle fa-icon-wait">
<input class="form-check-input ms-0 theme-control-toggle-input" type="checkbox" data-theme-control="phoenixTheme" value="dark" id="themeControlToggleSm" />
<label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggleSm" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="{{ _("Switch theme")}}" style="height:32px;width:32px;"><span class="icon" data-feather="moon"></span></label>
<label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggleSm" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="{{ _("Switch theme")}}" style="height:32px;width:32px;"><span class="icon" data-feather="sun"></span></label>
</div>
<input class="form-check-input ms-0 theme-control-toggle-input" type="checkbox" data-theme-control="phoenixTheme" value="dark" id="themeControlToggleSm" />
<label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggleSm" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="{{ _("Switch theme")}}" style="height:32px;width:32px;"><span class="icon" data-feather="moon"></span></label>
<label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggleSm" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="{{ _("Switch theme")}}" style="height:32px;width:32px;"><span class="icon" data-feather="sun"></span></label>
</div>
</li>
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link lh-1 pe-0" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" aria-haspopup="true" >
<span class="me-1" data-feather="globe" ></span>
<span class="me-1" data-feather="globe" ></span>
</a>
<div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 shadow border" aria-labelledby="languageDropdown">
<a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=en">English</a>
<a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=ar">عربي</a>
</div>
<div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 shadow border" aria-labelledby="languageDropdown">
<a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=en">English</a>
<a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=ar">عربي</a>
</div>
</li>
{% if user.is_authenticated %}
{% include "notifications.html" %}
{% endif %}
{% if user.is_authenticated %}
{% include "notifications.html" %}
{% endif %}
{% if user.is_authenticated and request.is_dealer or request.is_staff %}
<li class="nav-item dropdown">
<a class="nav-link lh-1 pe-0" id="navbarDropdownUser" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
<div class="avatar avatar-l text-center align-middle">
{% if user.dealer.logo %}
<img class="rounded-circle" src="{{ user.dealer.logo.url }}" alt="" />
{% elif user.staff.dealer.logo %}
<img class="rounded-circle" src="{{ user.staff.dealer.logo.url }}" alt="" />
{% else %}
<span class="fa fa-user text-body-tertiary fa-2x" style="width: 32px;"></span>
{% endif %}
</div>
</a>
<div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 dropdown-profile shadow border" aria-labelledby="navbarDropdownUser">
<div class="card position-relative border-0">
<div class="card-body p-0">
<div class="text-center pt-4 pb-3">
<div class="avatar avatar-xl">
<li class="nav-item dropdown">
<a class="nav-link lh-1 pe-0" id="navbarDropdownUser" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
<div class="avatar avatar-l text-center align-middle">
{% if user.dealer.logo %}
<img class="rounded-circle" src="{{ user.dealer.logo.url }}" alt="" />
{% elif user.staff.dealer.logo %}
<img class="rounded-circle" src="{{ user.staff.dealer.logo.url }}" alt="" />
{% else %}
<span class="fa fa-user text-body-tertiary fa-2x" style="width: 32px;"></span>
{% endif %}
</div>
</a>
<div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 dropdown-profile shadow border" aria-labelledby="navbarDropdownUser">
<div class="card position-relative border-0">
<div class="card-body p-0">
<div class="text-center pt-4 pb-3">
<div class="avatar avatar-xl">
{% if user.dealer.logo %}
<img class="rounded-circle" src="{{ user.dealer.logo.url }}" alt="" />
{% elif user.staff.dealer.logo %}
<img class="rounded-circle" src="{{ user.dealer.logo.url }}" alt="" />
{% elif user.staff.dealer.logo %}
<img class="rounded-circle" src="{{ user.staff.dealer.logo.url }}" alt="" />
{% else %}
{% else %}
<span class="fa fa-user text-body-tertiary fa-2x" style="width: 32px;"></span>
{% endif %}
</div>
{% if request.is_dealer %}
<h6 class="mt-2 text-body-emphasis">{{ user.dealer.get_local_name }}</h6>
{% else %}
<h6 class="mt-2 text-body-emphasis">{{ user.staffmember.staff.get_local_name }}</h6>
{% endif %}
</div>
{% if request.is_dealer %}
<h6 class="mt-2 text-body-emphasis">{{ user.dealer.get_local_name }}</h6>
{% else %}
<h6 class="mt-2 text-body-emphasis">{{ user.staffmember.staff.get_local_name }}</h6>
{% endif %}
</div>
</div>
<div class="overflow-auto scrollbar" style="height: 10rem;">
<ul class="nav d-flex flex-column mb-2 pb-1">
{% if request.is_dealer %}
<li class="nav-item">
<a class="nav-link px-3 d-block" href="{% url 'dealer_detail' request.user.dealer.pk %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link px-3 d-block" href="{% url 'appointment:user_profile' request.user.id %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
</li>
{% endif %}
{% if request.is_dealer %}
<li class="nav-item">
<a class="nav-link px-3 d-block" href="{% url 'user_list' %}"><span class="me-2 text-body align-bottom" data-feather="users"></span>{{ _("Staff & Groups") }}</a>
</li>
<li class="nav-item">
<a class="nav-link px-3 d-block" href="{% url 'dealer_activity' %}"> <span class="me-2 text-body align-bottom" data-feather="lock"></span>{{ _("Activities") }}</a>
</li>
{% endif %}
<li class="nav-item">
<div class="overflow-auto scrollbar" style="height: 10rem;">
<ul class="nav d-flex flex-column mb-2 pb-1">
{% if request.is_dealer %}
<a class="nav-link px-3 d-block" href="{% url 'dealer_settings' request.user.dealer.pk %}"> <span class="me-2 text-body align-bottom" data-feather="settings"></span>{{ _("Settings") }}</a>
<li class="nav-item">
<a class="nav-link px-3 d-block" href="{% url 'dealer_detail' request.user.dealer.pk %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link px-3 d-block" href="{% url 'appointment:user_profile' request.user.id %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
</li>
{% endif %}
</li>
<li class="nav-item">
<a class="nav-link px-3 d-block" href=""> <span class="me-2 text-body align-bottom" data-feather="help-circle"></span>Help Center</a>
</li>
{% if request.is_dealer %}
<li class="nav-item">
<a class="nav-link px-3 d-block" href="{% url 'user_list' %}"><span class="me-2 text-body align-bottom" data-feather="users"></span>{{ _("Staff & Groups") }}</a>
</li>
<li class="nav-item">
<a class="nav-link px-3 d-block" href="{% url 'dealer_activity' %}"> <span class="me-2 text-body align-bottom" data-feather="lock"></span>{{ _("Activities") }}</a>
</li>
{% endif %}
<li class="nav-item">
{% if request.is_dealer %}
<a class="nav-link px-3 d-block" href="{% url 'dealer_settings' request.user.dealer.pk %}"> <span class="me-2 text-body align-bottom" data-feather="settings"></span>{{ _("Settings") }}</a>
{% endif %}
</li>
<li class="nav-item">
<a class="nav-link px-3 d-block" href=""> <span class="me-2 text-body align-bottom" data-feather="help-circle"></span>Help Center</a>
</li>
<!--<li class="nav-item"><a class="nav-link px-3 d-block" href=""> Language</a></li>-->
</ul>
</div>
<div class="card-footer p-0 border-top border-translucent">
<ul class="nav d-flex flex-column my-3">
</ul>
</div>
<div class="card-footer p-0 border-top border-translucent">
<ul class="nav d-flex flex-column my-3">
<!--<li class="nav-item">
<a class="nav-link px-3 d-block" href=""> <span class="me-2 text-body align-bottom" data-feather="user-plus"></span>Add another account</a>
</li>-->
</ul>
<hr />
<div class="px-3">
<a class="btn btn-sm btn-danger d-flex flex-center w-100" href="{% url 'account_logout' %}"> <span class="me-2" data-feather="log-out"> </span>{% trans 'Sign Out' %}</a>
</div>
<div class="my-2 text-center fw-bold fs-10 text-body-quaternary">
<a class="text-body-quaternary me-1" href="">Privacy policy</a>&bull;<a class="text-body-quaternary mx-1" href="">Terms</a>&bull;<a class="text-body-quaternary ms-1" href="">Cookies</a>
</div>
{% else %}
<div class="px-3">
<a class="btn btn-phoenix-success d-flex flex-center w-100" href="{% url 'account_login' %}"> <span class="me-2" data-feather="log-in"> </span>{% trans 'Sign In' %}</a>
</div>
<div class="px-3">
<a class="btn btn-phoenix-primary d-flex flex-center w-100" href="{% url 'account_signup' %}"> <span class="me-2" data-feather="user-plus"> </span>{% trans 'Sign Up' %}</a>
</div>
{% endif %}
</div>
</div>
</ul>
<hr />
<div class="px-3">
<a class="btn btn-sm btn-danger d-flex flex-center w-100" href="{% url 'account_logout' %}"> <span class="me-2" data-feather="log-out"> </span>{% trans 'Sign Out' %}</a>
</div>
<div class="my-2 text-center fw-bold fs-10 text-body-quaternary">
<a class="text-body-quaternary me-1" href="">Privacy policy</a>&bull;<a class="text-body-quaternary mx-1" href="">Terms</a>&bull;<a class="text-body-quaternary ms-1" href="">Cookies</a>
</div>
{% else %}
<div class="px-3">
<a class="btn btn-phoenix-success d-flex flex-center w-100" href="{% url 'account_login' %}"> <span class="me-2" data-feather="log-in"> </span>{% trans 'Sign In' %}</a>
</div>
</li>
</ul>
<div class="px-3">
<a class="btn btn-phoenix-primary d-flex flex-center w-100" href="{% url 'account_signup' %}"> <span class="me-2" data-feather="user-plus"> </span>{% trans 'Sign Up' %}</a>
</div>
{% endif %}
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>

26
templates/index.html
View File

@ -1,19 +1,19 @@
{% extends 'base.html' %}
{% load i18n static custom_filters django_ledger %}
{% block content %}
{% if request.user.is_authenticated %}
<div
id="dashboard-content"
hx-get="{% if request.user.dealer %}{% url 'manager_dashboard' %}{% else %}{% url 'sales_dashboard' %}{% endif %}"
hx-trigger="load"
hx-target="#dashboard-content"
hx-swap="innerHTML"
>
<div class="spinner-container">
<div class="spinner"></div>
<p>Loading dashboard...</p>
{% if request.user.is_authenticated %}
<div
id="dashboard-content"
hx-get="{% if request.user.dealer %}{% url 'manager_dashboard' %}{% else %}{% url 'sales_dashboard' %}{% endif %}"
hx-trigger="load"
hx-target="#dashboard-content"
hx-swap="innerHTML"
>
<div class="spinner-container">
<div class="spinner"></div>
<p>Loading dashboard...</p>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endblock %}

188
templates/inventory/add_colors.html
View File

@ -1,117 +1,117 @@
{% extends "base.html" %}
{% load i18n %}
{% block content %}
<div class="row mt-4">
<h5 class="text-center">{% trans "Add Colors" %}</h5>
<p class="text-center">{% trans "Select exterior and interior colors for" %} {{ car.id_car_make.get_local_name }} {{ car.id_car_model.get_local_name }}</p>
<div class="row mt-4">
<h5 class="text-center">{% trans "Add Colors" %}</h5>
<p class="text-center">{% trans "Select exterior and interior colors for" %} {{ car.id_car_make.get_local_name }} {{ car.id_car_model.get_local_name }}</p>
<form method="post">
{% csrf_token %}
<form method="post">
{% csrf_token %}
<!-- Exterior Colors -->
<div class="row g-4">
<p class="fs-5 mb-0">{% trans 'Exterior Colors' %}</p>
{% for color in form.fields.exterior.queryset %}
<div class="col-lg-4 col-xl-2">
<div class="card rounded shadow-sm color-card">
<label class="color-option">
<input class="color-radio"
type="radio"
name="exterior"
value="{{ color.id }}">
<div class="card-body color-display" style="background-color: rgb({{ color.rgb }});">
<div class="">
<small>{{ color.get_local_name }}</small>
</div>
<div class="row g-4">
<p class="fs-5 mb-0">{% trans 'Exterior Colors' %}</p>
{% for color in form.fields.exterior.queryset %}
<div class="col-lg-4 col-xl-2">
<div class="card rounded shadow-sm color-card">
<label class="color-option">
<input class="color-radio"
type="radio"
name="exterior"
value="{{ color.id }}">
<div class="card-body color-display" style="background-color: rgb({{ color.rgb }});">
<div class="">
<small>{{ color.get_local_name }}</small>
</div>
</div>
</label>
</div>
</label>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
<!-- Interior Colors -->
<p class="fs-5 mt-3 mb-0">{% trans 'Interior Colors' %}</p>
{% for color in form.fields.interior.queryset %}
<div class="col-lg-4 col-xl-2">
<div class="card rounded shadow-sm color-card">
<label class="color-option">
<input class="color-radio"
type="radio"
name="interior"
value="{{ color.id }}">
<div class="card-body color-display" style="background-color: rgb({{ color.rgb }});">
<div class="">
<small>{{ color.get_local_name }}</small>
</div>
<p class="fs-5 mt-3 mb-0">{% trans 'Interior Colors' %}</p>
{% for color in form.fields.interior.queryset %}
<div class="col-lg-4 col-xl-2">
<div class="card rounded shadow-sm color-card">
<label class="color-option">
<input class="color-radio"
type="radio"
name="interior"
value="{{ color.id }}">
<div class="card-body color-display" style="background-color: rgb({{ color.rgb }});">
<div class="">
<small>{{ color.get_local_name }}</small>
</div>
</div>
</label>
</div>
</label>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
<!-- Save and Cancel Buttons -->
<div class="row g-1 mt-4">
<div class="btn-group">
<button type="submit" class="btn btn-success btn-sm me-1">{% trans "Save" %}</button>
<a href="{% url 'car_detail' car.pk %}" class="btn btn-secondary btn-sm">{% trans "Cancel" %}</a>
<div class="row g-1 mt-4">
<div class="btn-group">
<button type="submit" class="btn btn-success btn-sm me-1">{% trans "Save" %}</button>
<a href="{% url 'car_detail' car.pk %}" class="btn btn-secondary btn-sm">{% trans "Cancel" %}</a>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
<style>
.color-card {
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
<style>
.color-card {
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.color-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.color-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.color-option {
display: block;
position: relative;
margin: 0;
padding: 0;
}
.color-option {
display: block;
position: relative;
margin: 0;
padding: 0;
}
.color-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.color-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.color-radio:checked + .color-display {
border: 2px solid #0d6efd;
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
.color-radio:checked + .color-display {
border: 2px solid #0d6efd;
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
.color-radio:focus + .color-display {
border-color: #86b7fe;
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
.color-radio:focus + .color-display {
border-color: #86b7fe;
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
.color-display {
height: 100px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 10px;
border-radius: 0.25rem;
transition: all 0.2s ease;
}
.color-display {
height: 100px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 10px;
border-radius: 0.25rem;
transition: all 0.2s ease;
}
.color-name {
background-color: rgba(255, 255, 255, 0.8);
padding: 2px 5px;
border-radius: 3px;
text-align: center;
width: 100%;
}
</style>
.color-name {
background-color: rgba(255, 255, 255, 0.8);
padding: 2px 5px;
border-radius: 3px;
text-align: center;
width: 100%;
}
</style>
{% endblock %}

4
templates/inventory/add_custom_card.html
View File

@ -2,7 +2,7 @@
{% load crispy_forms_filters %}
<form method="post" id="customCardForm" action="{% url 'add_custom_card' car.pk %}">
{% csrf_token %}
{% csrf_token %}
{{ form|crispy }}
<div class="d-flex gap-1">
<button type="button"
@ -16,5 +16,5 @@
aria-label="Save changes">
<i class="fas fa-check"></i> {% trans 'Save' %}
</button>
</div>
</div>
</form>

14
templates/inventory/car_confirm_delete.html
View File

@ -5,12 +5,12 @@
{% block title %}Delete Car{% endblock %}
{% block content %}
<h1>Delete Car</h1>
<p>Are you sure you want to delete the car "{{ car }}"?</p>
<h1>Delete Car</h1>
<p>Are you sure you want to delete the car "{{ car }}"?</p>
<form method="post">
{% csrf_token %}
<button type="submit" class="btn btn-danger">Confirm Delete</button>
<a href="{% url 'car_detail' car.pk %}" class="btn btn-secondary">{% trans 'Cancel' %}</a>
</form>
<form method="post">
{% csrf_token %}
<button type="submit" class="btn btn-danger">Confirm Delete</button>
<a href="{% url 'car_detail' car.pk %}" class="btn btn-secondary">{% trans 'Cancel' %}</a>
</form>
{% endblock %}

1106
templates/inventory/car_detail.html
View File

File diff suppressed because it is too large Load Diff

28
templates/inventory/car_edit.html
View File

@ -1,19 +1,19 @@
{% extends 'base.html' %} {% load crispy_forms_filters %} {% load i18n %} {% load custom_filters %} {% block title %} {% trans 'Edit Car' %} {% endblock %} {% block content %}
<div class="row">
<div class="card rounded shadow mt-3">
<p class="card-header bg-primary text-white rounded-top fw-bold">{% trans 'Edit Car' %}</p>
<div class="card-body">
<form method="post" class="needs-validation" novalidate>
{% csrf_token %} {{ form|crispy }}
<div class="row">
<div class="card rounded shadow mt-3">
<p class="card-header bg-primary text-white rounded-top fw-bold">{% trans 'Edit Car' %}</p>
<div class="card-body">
<form method="post" class="needs-validation" novalidate>
{% csrf_token %} {{ form|crispy }}
<!-- Save and Back Buttons -->
<div class="d-flex justify-content-center mt-4 ms-2">
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger">{% trans "Back" %}</a>
<button type="submit" class="btn btn-sm btn-success ms-2">
{% trans 'Save' %}
</button>
</div>
</form>
<div class="d-flex justify-content-center mt-4 ms-2">
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger">{% trans "Back" %}</a>
<button type="submit" class="btn btn-sm btn-success ms-2">
{% trans 'Save' %}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}

62
templates/inventory/car_finance_form.html
View File

@ -6,44 +6,44 @@
{% block title %}{% trans "Car Finance Details" %}{% endblock %}
{% block content %}
<div class="row p-4">
<p class="mb-4">{% trans "Finance Details for" %}
{{ car.id_car_make.get_local_name }} - {{ car.id_car_model.get_local_name }}
</p>
<div class="row p-4">
<p class="mb-4">{% trans "Finance Details for" %}
{{ car.id_car_make.get_local_name }} - {{ car.id_car_model.get_local_name }}
</p>
<!-- Display Validation Errors -->
{% if form.errors %}
<div class="alert alert-danger">
<ul>
{% for field in form %}
{% for error in field.errors %}
<li>{{ field.label }}: {{ error }}</li>
{% if form.errors %}
<div class="alert alert-danger">
<ul>
{% for field in form %}
{% for error in field.errors %}
<li>{{ field.label }}: {{ error }}</li>
{% endfor %}
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<form method="post" class="needs-validation" novalidate>
<div class="row g-1">
<div class="col-lg-4 col-xl-12">
{% csrf_token %}
{{ form|crispy }}
</div>
</div>
<div class="row g-1">
{% for error in form.non_field_errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<form method="post" class="needs-validation" novalidate>
<div class="row g-1">
<div class="col-lg-4 col-xl-12">
{% csrf_token %}
{{ form|crispy }}
</div>
</div>
<div class="row g-1">
<div class="btn-group">
<button type="submit" class="btn btn-sm btn-success me-1">{% trans "Save" %}</button>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger">{% trans "Cancel" %}</a>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
<!-- JavaScript Section -->

Some files were not shown because too many files have changed in this diff Show More