Initial commit

This commit is contained in:
Daeng Deni Mardaeni
2023-07-03 14:33:24 +07:00
commit 6210e33a3b
3798 changed files with 258149 additions and 0 deletions

View File

@ -0,0 +1,549 @@
<!--begin::Modal - Invite Friends-->
<div class="modal fade" id="kt_modal_invite_friends" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog mw-650px">
<!--begin::Modal content-->
<div class="modal-content">
<!--begin::Modal header-->
<div class="modal-header pb-0 border-0 justify-content-end">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
<!--end::Close-->
</div>
<!--begin::Modal header-->
<!--begin::Modal body-->
<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
<!--begin::Heading-->
<div class="text-center mb-13">
<!--begin::Title-->
<h1 class="mb-3">Invite a Friend</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-5">If you need more info, please check out
<a href="#" class="link-primary fw-bold">FAQ Page</a>.</div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Google Contacts Invite-->
<div class="btn btn-light-primary fw-bold w-100 mb-8">
<img alt="Logo" src="assets/media/svg/brand-logos/google-icon.svg" class="h-20px me-3" />Invite Gmail Contacts</div>
<!--end::Google Contacts Invite-->
<!--begin::Separator-->
<div class="separator d-flex flex-center mb-8">
<span class="text-uppercase bg-body fs-7 fw-semibold text-muted px-3">or</span>
</div>
<!--end::Separator-->
<!--begin::Textarea-->
<textarea class="form-control form-control-solid mb-8" rows="3" placeholder="Type or paste emails here"></textarea>
<!--end::Textarea-->
<!--begin::Users-->
<div class="mb-10">
<!--begin::Heading-->
<div class="fs-6 fw-semibold mb-2">Your Invitations</div>
<!--end::Heading-->
<!--begin::List-->
<div class="mh-300px scroll-y me-n7 pe-7">
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-6.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Smith</a>
<div class="fw-semibold text-muted">smith@kpmg.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">M</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Melody Macy</a>
<div class="fw-semibold text-muted">melody@altbox.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-1.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Max Smith</a>
<div class="fw-semibold text-muted">max@kt.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-5.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sean Bean</a>
<div class="fw-semibold text-muted">sean@dellito.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-25.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Brian Cox</a>
<div class="fw-semibold text-muted">brian@exchange.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-warning text-warning fw-semibold">C</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Mikaela Collins</a>
<div class="fw-semibold text-muted">mik@pex.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-9.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Francis Mitcham</a>
<div class="fw-semibold text-muted">f.mit@kpmg.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">O</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Olivia Wild</a>
<div class="fw-semibold text-muted">olivia@corpmail.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-primary text-primary fw-semibold">N</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Neil Owen</a>
<div class="fw-semibold text-muted">owen.neil@gmail.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-23.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dan Wilson</a>
<div class="fw-semibold text-muted">dam@consilting.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">E</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Bold</a>
<div class="fw-semibold text-muted">emma@intenso.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-12.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ana Crown</a>
<div class="fw-semibold text-muted">ana.cf@limtel.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-info text-info fw-semibold">A</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Robert Doe</a>
<div class="fw-semibold text-muted">robert@benko.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-13.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">John Miller</a>
<div class="fw-semibold text-muted">miller@mapple.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-success text-success fw-semibold">L</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lucy Kunic</a>
<div class="fw-semibold text-muted">lucy.m@fentech.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-21.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ethan Wilder</a>
<div class="fw-semibold text-muted">ethan@loop.com.au</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-21.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ethan Wilder</a>
<div class="fw-semibold text-muted">ethan@loop.com.au</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
</div>
<!--end::List-->
</div>
<!--end::Users-->
<!--begin::Notice-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5 fw-semibold">
<label class="fs-6">Adding Users by Team Members</label>
<div class="fs-7 text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1" checked="checked" />
<span class="form-check-label fw-semibold text-muted">Allowed</span>
</label>
<!--end::Switch-->
</div>
<!--end::Notice-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - Invite Friend-->

View File

@ -0,0 +1,153 @@
<!--begin::Modal - New Target-->
<div class="modal fade" id="kt_modal_new_target" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-dialog-centered mw-650px">
<!--begin::Modal content-->
<div class="modal-content rounded">
<!--begin::Modal header-->
<div class="modal-header pb-0 border-0 justify-content-end">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
<!--end::Close-->
</div>
<!--begin::Modal header-->
<!--begin::Modal body-->
<div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
<!--begin:Form-->
<form id="kt_modal_new_target_form" class="form" action="#">
<!--begin::Heading-->
<div class="mb-13 text-center">
<!--begin::Title-->
<h1 class="mb-3">Set First Target</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-5">If you need more info, please check
<a href="#" class="fw-bold link-primary">Project Guidelines</a>.</div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-8 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
<span class="required">Target Title</span>
<span class="ms-1" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></span>
</label>
<!--end::Label-->
<input type="text" class="form-control form-control-solid" placeholder="Enter Target Title" name="target_title" />
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row g-9 mb-8">
<!--begin::Col-->
<div class="col-md-6 fv-row">
<label class="required fs-6 fw-semibold mb-2">Assign</label>
<select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member" name="target_assign">
<option value="">Select user...</option>
<option value="1">Karina Clark</option>
<option value="2">Robert Doe</option>
<option value="3">Niel Owen</option>
<option value="4">Olivia Wild</option>
<option value="5">Sean Bean</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-6 fv-row">
<label class="required fs-6 fw-semibold mb-2">Due Date</label>
<!--begin::Input-->
<div class="position-relative d-flex align-items-center">
<!--begin::Icon-->
{!! getIcon('calendar-8', 'fs-2 position-absolute mx-4') !!}
<!--end::Icon-->
<!--begin::Datepicker-->
<input class="form-control form-control-solid ps-12" placeholder="Select a date" name="due_date" />
<!--end::Datepicker--></div>
<!--end::Input-->
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-8">
<label class="fs-6 fw-semibold mb-2">Target Details</label>
<textarea class="form-control form-control-solid" rows="3" name="target_details" placeholder="Type Target Details"></textarea>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-8 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
<span class="required">Tags</span>
@include('partials/general/_form-tooltip-hint')
</label>
<!--end::Label-->
<input class="form-control form-control-solid" value="Important, Urgent" name="tags" />
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-stack mb-8">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-semibold">Adding Users by Team Members</label>
<div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1" checked="checked" />
<span class="form-check-label fw-semibold text-muted">Allowed</span>
</label>
<!--end::Switch-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-15 fv-row">
<!--begin::Wrapper-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="fw-semibold me-5">
<label class="fs-6">Notifications</label>
<div class="fs-7 text-muted">Allow Notifications by Phone or Email</div>
</div>
<!--end::Label-->
<!--begin::Checkboxes-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-10">
<input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="email" checked="checked" />
<span class="form-check-label fw-semibold">Email</span>
</label>
<!--end::Checkbox-->
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid">
<input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="phone" />
<span class="form-check-label fw-semibold">Phone</span>
</label>
<!--end::Checkbox-->
</div>
<!--end::Checkboxes-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="text-center">
<button type="reset" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Cancel</button>
<button type="submit" id="kt_modal_new_target_submit" class="btn btn-primary">
<span class="indicator-label">Submit</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</form>
<!--end:Form-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - New Target-->

View File

@ -0,0 +1,342 @@
<!--begin::Modal - Upgrade plan-->
<div class="modal fade" id="kt_modal_upgrade_plan" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-xl">
<!--begin::Modal content-->
<div class="modal-content rounded">
<!--begin::Modal header-->
<div class="modal-header justify-content-end border-0 pb-0">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
<!--end::Close-->
</div>
<!--end::Modal header-->
<!--begin::Modal body-->
<div class="modal-body pt-0 pb-15 px-5 px-xl-20">
<!--begin::Heading-->
<div class="mb-13 text-center">
<h1 class="mb-3">Upgrade a Plan</h1>
<div class="text-muted fw-semibold fs-5">If you need more info, please check
<a href="#" class="link-primary fw-bold">Pricing Guidelines</a>.</div>
</div>
<!--end::Heading-->
<!--begin::Plans-->
<div class="d-flex flex-column">
<!--begin::Nav group-->
<div class="nav-group nav-group-outline mx-auto" data-kt-buttons="true">
<button class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3 me-2 active" data-kt-plan="month">Monthly</button>
<button class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3" data-kt-plan="annual">Annual</button>
</div>
<!--end::Nav group-->
<!--begin::Row-->
<div class="row mt-10">
<!--begin::Col-->
<div class="col-lg-6 mb-10 mb-lg-0">
<!--begin::Tabs-->
<div class="nav flex-column">
<!--begin::Tab link-->
<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 active mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_startup">
<!--end::Description-->
<div class="d-flex align-items-center me-2">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
<input class="form-check-input" type="radio" name="plan" checked="checked" value="startup" />
</div>
<!--end::Radio-->
<!--begin::Info-->
<div class="flex-grow-1">
<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Startup</div>
<div class="fw-semibold opacity-75">Best for startups</div>
</div>
<!--end::Info-->
</div>
<!--end::Description-->
<!--begin::Price-->
<div class="ms-5">
<span class="mb-2">$</span>
<span class="fs-3x fw-bold" data-kt-plan-price-month="39" data-kt-plan-price-annual="399">39</span>
<span class="fs-7 opacity-50">/
<span data-kt-element="period">Mon</span></span>
</div>
<!--end::Price-->
</label>
<!--end::Tab link-->
<!--begin::Tab link-->
<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_advanced">
<!--end::Description-->
<div class="d-flex align-items-center me-2">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
<input class="form-check-input" type="radio" name="plan" value="advanced" />
</div>
<!--end::Radio-->
<!--begin::Info-->
<div class="flex-grow-1">
<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Advanced</div>
<div class="fw-semibold opacity-75">Best for 100+ team size</div>
</div>
<!--end::Info-->
</div>
<!--end::Description-->
<!--begin::Price-->
<div class="ms-5">
<span class="mb-2">$</span>
<span class="fs-3x fw-bold" data-kt-plan-price-month="339" data-kt-plan-price-annual="3399">339</span>
<span class="fs-7 opacity-50">/
<span data-kt-element="period">Mon</span></span>
</div>
<!--end::Price-->
</label>
<!--end::Tab link-->
<!--begin::Tab link-->
<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_enterprise">
<!--end::Description-->
<div class="d-flex align-items-center me-2">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
<input class="form-check-input" type="radio" name="plan" value="enterprise" />
</div>
<!--end::Radio-->
<!--begin::Info-->
<div class="flex-grow-1">
<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Enterprise
<span class="badge badge-light-success ms-2 py-2 px-3 fs-7">Popular</span></div>
<div class="fw-semibold opacity-75">Best value for 1000+ team</div>
</div>
<!--end::Info-->
</div>
<!--end::Description-->
<!--begin::Price-->
<div class="ms-5">
<span class="mb-2">$</span>
<span class="fs-3x fw-bold" data-kt-plan-price-month="999" data-kt-plan-price-annual="9999">999</span>
<span class="fs-7 opacity-50">/
<span data-kt-element="period">Mon</span></span>
</div>
<!--end::Price-->
</label>
<!--end::Tab link-->
<!--begin::Tab link-->
<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_custom">
<!--end::Description-->
<div class="d-flex align-items-center me-2">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
<input class="form-check-input" type="radio" name="plan" value="custom" />
</div>
<!--end::Radio-->
<!--begin::Info-->
<div class="flex-grow-1">
<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Custom</div>
<div class="fw-semibold opacity-75">Requet a custom license</div>
</div>
<!--end::Info-->
</div>
<!--end::Description-->
<!--begin::Price-->
<div class="ms-5">
<a href="#" class="btn btn-sm btn-success">Contact Us</a>
</div>
<!--end::Price-->
</label>
<!--end::Tab link-->
</div>
<!--end::Tabs-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-lg-6">
<!--begin::Tab content-->
<div class="tab-content rounded h-100 bg-light p-10">
<!--begin::Tab Pane-->
<div class="tab-pane fade show active" id="kt_upgrade_plan_startup">
<!--begin::Heading-->
<div class="pb-5">
<h2 class="fw-bold text-dark">Whats in Startup Plan?</h2>
<div class="text-muted fw-semibold">Optimal for 10+ team size and new startup</div>
</div>
<!--end::Heading-->
<!--begin::Body-->
<div class="pt-1">
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-muted flex-grow-1">Finance Module</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-muted flex-grow-1">Accounting Module</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-muted flex-grow-1">Network Platform</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<span class="fw-semibold fs-5 text-muted flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::Tab Pane-->
<!--begin::Tab Pane-->
<div class="tab-pane fade" id="kt_upgrade_plan_advanced">
<!--begin::Heading-->
<div class="pb-5">
<h2 class="fw-bold text-dark">Whats in Startup Plan?</h2>
<div class="text-muted fw-semibold">Optimal for 100+ team size and grown company</div>
</div>
<!--end::Heading-->
<!--begin::Body-->
<div class="pt-1">
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-muted flex-grow-1">Network Platform</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<span class="fw-semibold fs-5 text-muted flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::Tab Pane-->
<!--begin::Tab Pane-->
<div class="tab-pane fade" id="kt_upgrade_plan_enterprise">
<!--begin::Heading-->
<div class="pb-5">
<h2 class="fw-bold text-dark">Whats in Startup Plan?</h2>
<div class="text-muted fw-semibold">Optimal for 1000+ team and enterpise</div>
</div>
<!--end::Heading-->
<!--begin::Body-->
<div class="pt-1">
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Network Platform</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::Tab Pane-->
<!--begin::Tab Pane-->
<div class="tab-pane fade" id="kt_upgrade_plan_custom">
<!--begin::Heading-->
<div class="pb-5">
<h2 class="fw-bold text-dark">Whats in Startup Plan?</h2>
<div class="text-muted fw-semibold">Optimal for corporations</div>
</div>
<!--end::Heading-->
<!--begin::Body-->
<div class="pt-1">
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Network Platform</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::Tab Pane-->
</div>
<!--end::Tab content-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Plans-->
<!--begin::Actions-->
<div class="d-flex flex-center flex-row-fluid pt-12">
<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="kt_modal_upgrade_plan_btn">
@include('partials/general/_button-indicator')
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - Upgrade plan-->

View File

@ -0,0 +1,500 @@
<!--begin::Modal - View Users-->
<div class="modal fade" id="kt_modal_view_users" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog mw-650px">
<!--begin::Modal content-->
<div class="modal-content">
<!--begin::Modal header-->
<div class="modal-header pb-0 border-0 justify-content-end">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
<!--end::Close-->
</div>
<!--begin::Modal header-->
<!--begin::Modal body-->
<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
<!--begin::Heading-->
<div class="text-center mb-13">
<!--begin::Title-->
<h1 class="mb-3">Browse Users</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-5">If you need more info, please check out our
<a href="#" class="link-primary fw-bold">Users Directory</a>.</div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Users-->
<div class="mb-15">
<!--begin::List-->
<div class="mh-375px scroll-y me-n7 pe-7">
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-6.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Emma Smith
<span class="badge badge-light fs-8 fw-semibold ms-2">Art Director</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">smith@kpmg.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$23,000</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">M</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Melody Macy
<span class="badge badge-light fs-8 fw-semibold ms-2">Marketing Analytic</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">melody@altbox.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$50,500</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-1.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Max Smith
<span class="badge badge-light fs-8 fw-semibold ms-2">Software Enginer</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">max@kt.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$75,900</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-5.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Sean Bean
<span class="badge badge-light fs-8 fw-semibold ms-2">Web Developer</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">sean@dellito.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$10,500</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-25.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Brian Cox
<span class="badge badge-light fs-8 fw-semibold ms-2">UI/UX Designer</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">brian@exchange.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$20,000</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-warning text-warning fw-semibold">C</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Mikaela Collins
<span class="badge badge-light fs-8 fw-semibold ms-2">Head Of Marketing</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">mik@pex.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$9,300</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-9.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Francis Mitcham
<span class="badge badge-light fs-8 fw-semibold ms-2">Software Arcitect</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">f.mit@kpmg.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$15,000</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">O</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Olivia Wild
<span class="badge badge-light fs-8 fw-semibold ms-2">System Admin</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">olivia@corpmail.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$23,000</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-primary text-primary fw-semibold">N</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Neil Owen
<span class="badge badge-light fs-8 fw-semibold ms-2">Account Manager</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">owen.neil@gmail.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$45,800</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-23.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Dan Wilson
<span class="badge badge-light fs-8 fw-semibold ms-2">Web Desinger</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">dam@consilting.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$90,500</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">E</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Emma Bold
<span class="badge badge-light fs-8 fw-semibold ms-2">Corporate Finance</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">emma@intenso.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$5,000</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-12.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Ana Crown
<span class="badge badge-light fs-8 fw-semibold ms-2">Customer Relationship</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">ana.cf@limtel.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$70,000</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-5">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-info text-info fw-semibold">A</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<!--begin::Name-->
<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Robert Doe
<span class="badge badge-light fs-8 fw-semibold ms-2">Marketing Executive</span></a>
<!--end::Name-->
<!--begin::Email-->
<div class="fw-semibold text-muted">robert@benko.com</div>
<!--end::Email-->
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Stats-->
<div class="d-flex">
<!--begin::Sales-->
<div class="text-end">
<div class="fs-5 fw-bold text-dark">$45,500</div>
<div class="fs-7 text-muted">Sales</div>
</div>
<!--end::Sales-->
</div>
<!--end::Stats-->
</div>
<!--end::User-->
</div>
<!--end::List-->
</div>
<!--end::Users-->
<!--begin::Notice-->
<div class="d-flex justify-content-between">
<!--begin::Label-->
<div class="fw-semibold">
<label class="fs-6">Adding Users by Team Members</label>
<div class="fs-7 text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" checked="checked" />
<span class="form-check-label fw-semibold text-muted">Allowed</span>
</label>
<!--end::Switch-->
</div>
<!--end::Notice-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - View Users-->

View File

@ -0,0 +1,182 @@
<!--begin::Modal - Create App-->
<div class="modal fade" id="kt_modal_create_app" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-dialog-centered mw-900px">
<!--begin::Modal content-->
<div class="modal-content">
<!--begin::Modal header-->
<div class="modal-header">
<!--begin::Modal title-->
<h2>Create App</h2>
<!--end::Modal title-->
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
<!--end::Close-->
</div>
<!--end::Modal header-->
<!--begin::Modal body-->
<div class="modal-body py-lg-10 px-lg-10">
<!--begin::Stepper-->
<div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_modal_create_app_stepper">
<!--begin::Aside-->
<div class="d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px">
<!--begin::Nav-->
<div class="stepper-nav ps-lg-10">
<!--begin::Step 1-->
<div class="stepper-item current" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">1</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Details</h3>
<div class="stepper-desc">Name your App</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
<!--begin::Line-->
<div class="stepper-line h-40px"></div>
<!--end::Line-->
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">2</span>
</div>
<!--begin::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Frameworks</h3>
<div class="stepper-desc">Define your app framework</div>
</div>
<!--begin::Label-->
</div>
<!--end::Wrapper-->
<!--begin::Line-->
<div class="stepper-line h-40px"></div>
<!--end::Line-->
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">3</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Database</h3>
<div class="stepper-desc">Select the app database type</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
<!--begin::Line-->
<div class="stepper-line h-40px"></div>
<!--end::Line-->
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">4</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Billing</h3>
<div class="stepper-desc">Provide payment details</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
<!--begin::Line-->
<div class="stepper-line h-40px"></div>
<!--end::Line-->
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div class="stepper-item mark-completed" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">5</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Completed</h3>
<div class="stepper-desc">Review and Submit</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 5-->
</div>
<!--end::Nav-->
</div>
<!--begin::Aside-->
<!--begin::Content-->
<div class="flex-row-fluid py-lg-5 px-lg-15">
<!--begin::Form-->
<form class="form" novalidate="novalidate" id="kt_modal_create_app_form">
@include('partials/modals/create-app/steps/_step-1')
@include('partials/modals/create-app/steps/_step-2')
@include('partials/modals/create-app/steps/_step-3')
@include('partials/modals/create-app/steps/_step-4')
@include('partials/modals/create-app/steps/_step-5')
<!--begin::Actions-->
<div class="d-flex flex-stack pt-10">
<!--begin::Wrapper-->
<div class="me-2">
<button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">{!! getIcon('arrow-left', 'fs-3 me-1') !!} Back</button>
</div>
<!--end::Wrapper-->
<!--begin::Wrapper-->
<div>
<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="submit">
<span class="indicator-label">Submit {!! getIcon('arrow-right', 'fs-3 ms-2 me-0') !!}</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continue {!! getIcon('arrow-right', 'fs-3 ms-1 me-0') !!}</button>
</div>
<!--end::Wrapper-->
</div>
<!--end::Actions-->
</form>
<!--end::Form-->
</div>
<!--end::Content-->
</div>
<!--end::Stepper-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - Create App-->

View File

@ -0,0 +1,105 @@
<!--begin::Step 1-->
<div class="current" data-kt-stepper-element="content">
<div class="w-100">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-semibold mb-2">
<span class="required">App Name</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify your unique app name"></i>
</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-lg form-control-solid" name="name" placeholder="" value="" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
<span class="required">Category</span>
<span class="ms-1" data-bs-toggle="tooltip" title="Select your app category"></span>
</label>
<!--end::Label-->
<!--begin:Options-->
<div class="fv-row">
<!--begin:Option-->
<label class="d-flex flex-stack mb-5 cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-primary">{!! getIcon('compass', 'fs-1 text-primary') !!}</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">Quick Online Courses</span>
<span class="fs-7 text-muted">Creating a clear text structure is just one SEO</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="category" value="1" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack mb-5 cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-danger">{!! getIcon('element-11', 'fs-1 text-danger') !!}</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">Face to Face Discussions</span>
<span class="fs-7 text-muted">Creating a clear text structure is just one aspect</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="category" value="2" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-success">{!! getIcon('timer', 'fs-1 text-success') !!}</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">Full Intro Training</span>
<span class="fs-7 text-muted">Creating a clear text structure copywriting</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="category" value="3" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
</div>
<!--end:Options-->
</div>
<!--end::Input group-->
</div>
</div>
<!--end::Step 1-->

View File

@ -0,0 +1,120 @@
<!--begin::Step 2-->
<div data-kt-stepper-element="content">
<div class="w-100">
<!--begin::Input group-->
<div class="fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
<span class="required">Select Framework</span>
<span class="ms-1" data-bs-toggle="tooltip" title="Specify your apps framework"></span>
</label>
<!--end::Label-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-warning">
<i class="fab fa-html5 text-warning fs-2x"></i>
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">HTML5</span>
<span class="fs-7 text-muted">Base Web Projec</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" checked="checked" name="framework" value="1" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-success">
<i class="fab fa-react text-success fs-2x"></i>
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">ReactJS</span>
<span class="fs-7 text-muted">Robust and flexible app framework</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="framework" value="2" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-danger">
<i class="fab fa-angular text-danger fs-2x"></i>
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">Angular</span>
<span class="fs-7 text-muted">Powerful data mangement</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="framework" value="3" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-primary">
<i class="fab fa-vuejs text-primary fs-2x"></i>
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">Vue</span>
<span class="fs-7 text-muted">Lightweight and responsive framework</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="framework" value="4" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
</div>
<!--end::Input group-->
</div>
</div>
<!--end::Step 2-->

View File

@ -0,0 +1,104 @@
<!--begin::Step 3-->
<div data-kt-stepper-element="content">
<div class="w-100">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="required fs-5 fw-semibold mb-2">Database Name</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-lg form-control-solid" name="dbname" placeholder="" value="master_db" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
<span class="required">Select Database Engine</span>
<span class="ms-1" data-bs-toggle="tooltip" title="Select your app database engine"></span>
</label>
<!--end::Label-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin::Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-success">
<i class="fas fa-database text-success fs-2x"></i>
</span>
</span>
<!--end::Icon-->
<!--begin::Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">MySQL</span>
<span class="fs-7 text-muted">Basic MySQL database</span>
</span>
<!--end::Info-->
</span>
<!--end::Label-->
<!--begin::Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="dbengine" checked="checked" value="1" />
</span>
<!--end::Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin::Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-danger">
<i class="fab fa-google text-danger fs-2x"></i>
</span>
</span>
<!--end::Icon-->
<!--begin::Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">Firebase</span>
<span class="fs-7 text-muted">Google based app data management</span>
</span>
<!--end::Info-->
</span>
<!--end::Label-->
<!--begin::Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="dbengine" value="2" />
</span>
<!--end::Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer">
<!--begin::Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-warning">
<i class="fab fa-amazon text-warning fs-2x"></i>
</span>
</span>
<!--end::Icon-->
<!--begin::Info-->
<span class="d-flex flex-column">
<span class="fw-bold fs-6">DynamoDB</span>
<span class="fs-7 text-muted">Amazon Fast NoSQL Database</span>
</span>
<!--end::Info-->
</span>
<!--end::Label-->
<!--begin::Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="dbengine" value="3" />
</span>
<!--end::Input-->
</label>
<!--end::Option-->
</div>
<!--end::Input group-->
</div>
</div>
<!--end::Step 3-->

View File

@ -0,0 +1,7 @@
<!--begin::Step 4-->
<div data-kt-stepper-element="content">
<div class="w-100">
@include('partials/modals/new-card/_form')
</div>
</div>
<!--end::Step 4-->

View File

@ -0,0 +1,17 @@
<!--begin::Step 5-->
<div data-kt-stepper-element="content">
<div class="w-100 text-center">
<!--begin::Heading-->
<h1 class="fw-bold text-dark mb-3">Release!</h1>
<!--end::Heading-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-3">Submit your app to kickstart your project.</div>
<!--end::Description-->
<!--begin::Illustration-->
<div class="text-center px-4 py-15">
<img src="assets/media/illustrations/sketchy-1/9.png" alt="" class="mw-100 mh-300px" />
</div>
<!--end::Illustration-->
</div>
</div>
<!--end::Step 5-->

View File

@ -0,0 +1,91 @@
<!--begin::Modal - Create Campaign-->
<div class="modal fade" id="kt_modal_create_campaign" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-fullscreen p-9">
<!--begin::Modal content-->
<div class="modal-content modal-rounded">
<!--begin::Modal header-->
<div class="modal-header py-7 d-flex justify-content-between">
<!--begin::Modal title-->
<h2>Create Campaign</h2>
<!--end::Modal title-->
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
{!! getSvgIcon('duotune/arrows/arr061.svg', 'svg-icon svg-icon-1') !!}
</div>
<!--end::Close-->
</div>
<!--begin::Modal header-->
<!--begin::Modal body-->
<div class="modal-body scroll-y m-5">
<!--begin::Stepper-->
<div class="stepper stepper-links d-flex flex-column" id="kt_modal_create_campaign_stepper">
<!--begin::Nav-->
<div class="stepper-nav justify-content-center py-2">
<!--begin::Step 1-->
<div class="stepper-item me-5 me-md-15 current" data-kt-stepper-element="nav">
<h3 class="stepper-title">Campaign Details</h3>
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
<h3 class="stepper-title">Creative Uploads</h3>
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
<h3 class="stepper-title">Audiences</h3>
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
<h3 class="stepper-title">Budget Estimates</h3>
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div class="stepper-item" data-kt-stepper-element="nav">
<h3 class="stepper-title">Completed</h3>
</div>
<!--end::Step 5-->
</div>
<!--end::Nav-->
<!--begin::Form-->
<form class="mx-auto w-100 mw-600px pt-15 pb-10" novalidate="novalidate" id="kt_modal_create_campaign_stepper_form">
@incldue('partials/modals/create-campaign/steps/step-1')
@incldue('partials/modals/create-campaign/steps/step-2')
@incldue('partials/modals/create-campaign/steps/step-3')
@incldue('partials/modals/create-campaign/steps/step-4')
@incldue('partials/modals/create-campaign/steps/step-5')
<!--begin::Actions-->
<div class="d-flex flex-stack pt-10">
<!--begin::Wrapper-->
<div class="me-2">
<button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
{!! getSvgIcon('duotune/arrows/arr063.svg', 'svg-icon svg-icon-3 me-1') !!} Back
</button>
</div>
<!--end::Wrapper-->
<!--begin::Wrapper-->
<div>
<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="submit">
<span class="indicator-label">Submit {!! getSvgIcon('duotune/arrows/arr064.svg', 'svg-icon svg-icon-3 ms-2 me-0') !!}</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continue {!! getSvgIcon('duotune/arrows/arr064.svg', 'svg-icon svg-icon-3 ms-1 me-0') !!}</button>
</div>
<!--end::Wrapper-->
</div>
<!--end::Actions-->
</form>
<!--end::Form-->
</div>
<!--end::Stepper-->
</div>
<!--begin::Modal body-->
</div>
</div>
</div>
<!--end::Modal - Create Campaign-->

View File

@ -0,0 +1,170 @@
<!--begin::Step 1-->
<div class="current" data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-15">
<!--begin::Title-->
<h2 class="fw-bold d-flex align-items-center text-dark">Setup Campaign Details
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Campaign name will be used as reference within your campaign reports"></i></h2>
<!--end::Title-->
<!--begin::Notice-->
<div class="text-muted fw-semibold fs-6">If you need more info, please check out
<a href="#" class="link-primary fw-bold">Help Page</a>.</div>
<!--end::Notice-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="mb-10 fv-row">
<!--begin::Label-->
<label class="required form-label mb-3">Campaign Name</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-lg form-control-solid" name="campaign_name" placeholder="" value="" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="d-block fw-semibold fs-6 mb-5">
<span class="required">Company Logo</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="E.g. Select a logo to represent the company that's running the campaign."></i>
</label>
<!--end::Label-->
<!--begin::Image input placeholder-->
<style>.image-input-placeholder { background-image: url('{% static "media/svg/files/blank-image.svg" %}'); } [data-bs-theme="dark"] .image-input-placeholder { background-image: url('{% static "media/svg/files/blank-image-dark.svg" %}'); }</style>
<!--end::Image input placeholder-->
<!--begin::Image input-->
<div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
<!--begin::Preview existing avatar-->
<div class="image-input-wrapper w-125px h-125px"></div>
<!--end::Preview existing avatar-->
<!--begin::Label-->
<label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
<i class="bi bi-pencil-fill fs-7"></i>
<!--begin::Inputs-->
<input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
<input type="hidden" name="avatar_remove" />
<!--end::Inputs-->
</label>
<!--end::Label-->
<!--begin::Cancel-->
<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
<i class="bi bi-x fs-2"></i>
</span>
<!--end::Cancel-->
<!--begin::Remove-->
<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
<i class="bi bi-x fs-2"></i>
</span>
<!--end::Remove-->
</div>
<!--end::Image input-->
<!--begin::Hint-->
<div class="form-text">Allowed file types: png, jpg, jpeg.</div>
<!--end::Hint-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="required fw-semibold fs-6 mb-5">Campaign Goal</label>
<!--end::Label-->
<!--begin::Roles-->
<!--begin::Input row-->
<div class="d-flex fv-row">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input me-3" name="user_role" type="radio" value="0" id="kt_modal_update_role_option_0" checked='checked' />
<!--end::Input-->
<!--begin::Label-->
<label class="form-check-label" for="kt_modal_update_role_option_0">
<div class="fw-bold text-gray-800">Get more visitors</div>
<div class="text-gray-600">Increase impression traffic onto the platform</div>
</label>
<!--end::Label-->
</div>
<!--end::Radio-->
</div>
<!--end::Input row-->
<div class='separator separator-dashed my-5'></div>
<!--begin::Input row-->
<div class="d-flex fv-row">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input me-3" name="user_role" type="radio" value="1" id="kt_modal_update_role_option_1" />
<!--end::Input-->
<!--begin::Label-->
<label class="form-check-label" for="kt_modal_update_role_option_1">
<div class="fw-bold text-gray-800">Get more messages on chat</div>
<div class="text-gray-600">Increase community interaction and communication</div>
</label>
<!--end::Label-->
</div>
<!--end::Radio-->
</div>
<!--end::Input row-->
<div class='separator separator-dashed my-5'></div>
<!--begin::Input row-->
<div class="d-flex fv-row">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input me-3" name="user_role" type="radio" value="2" id="kt_modal_update_role_option_2" />
<!--end::Input-->
<!--begin::Label-->
<label class="form-check-label" for="kt_modal_update_role_option_2">
<div class="fw-bold text-gray-800">Get more calls</div>
<div class="text-gray-600">Boost telecommunication feedback to provide precise and accurate information</div>
</label>
<!--end::Label-->
</div>
<!--end::Radio-->
</div>
<!--end::Input row-->
<div class='separator separator-dashed my-5'></div>
<!--begin::Input row-->
<div class="d-flex fv-row">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input me-3" name="user_role" type="radio" value="3" id="kt_modal_update_role_option_3" />
<!--end::Input-->
<!--begin::Label-->
<label class="form-check-label" for="kt_modal_update_role_option_3">
<div class="fw-bold text-gray-800">Get more likes</div>
<div class="text-gray-600">Increase positive interactivity on social media platforms</div>
</label>
<!--end::Label-->
</div>
<!--end::Radio-->
</div>
<!--end::Input row-->
<div class='separator separator-dashed my-5'></div>
<!--begin::Input row-->
<div class="d-flex fv-row">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input me-3" name="user_role" type="radio" value="4" id="kt_modal_update_role_option_4" />
<!--end::Input-->
<!--begin::Label-->
<label class="form-check-label" for="kt_modal_update_role_option_4">
<div class="fw-bold text-gray-800">Lead generation</div>
<div class="text-gray-600">Collect contact information for potential customers</div>
</label>
<!--end::Label-->
</div>
<!--end::Radio-->
</div>
<!--end::Input row-->
<!--end::Roles-->
</div>
<!--end::Input group-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 1-->

View File

@ -0,0 +1,211 @@
<!--begin::Step 2-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Upload Files</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check
<a href="#" class="link-primary">Campaign Guidelines</a></div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Dropzone-->
<div class="dropzone" id="kt_modal_create_campaign_files_upload">
<!--begin::Message-->
<div class="dz-message needsclick">
<!--begin::Icon-->
{!! getSvgIcon('duotune/files/fil010.svg', 'svg-icon svg-icon-3hx svg-icon-primary') !!}
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-4">
<h3 class="dfs-3 fw-bold text-gray-900 mb-1">Drop campaign files here or click to upload.</h3>
<span class="fw-semibold fs-4 text-muted">Upload up to 10 files</span>
</div>
<!--end::Info--></div>
</div>
<!--end::Dropzone-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Uploaded File</label>
<!--End::Label-->
<!--begin::Files-->
<div class="mh-300px scroll-y me-n7 pe-7">
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/pdf.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Product Specifications</a>
<div class="fw-semibold text-muted">230kb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/tif.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Campaign Creative Poster</a>
<div class="fw-semibold text-muted">2.4mb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/folder-document.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Campaign Landing Page Source</a>
<div class="fw-semibold text-muted">1.12mb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/css.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Landing Page Styling</a>
<div class="fw-semibold text-muted">85kb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/ai.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Design Source Files</a>
<div class="fw-semibold text-muted">48mb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/doc.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Campaign Plan Document</a>
<div class="fw-semibold text-muted">27kb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
</div>
<!--end::Files-->
</div>
<!--end::Input group-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 2-->

View File

@ -0,0 +1,111 @@
<!--begin::Step 3-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Configure Audiences</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check
<a href="#" class="link-primary">Campaign Guidelines</a></div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Gender
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Show your ads to either men or women, or select 'All' for both"></i></label>
<!--End::Label-->
<!--begin::Row-->
<div class="row g-9" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
<!--begin::Radio-->
<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
<input class="form-check-input" type="radio" name="campaign_gender" value="1" checked="checked" />
</span>
<!--end::Radio-->
<!--begin::Info-->
<span class="ms-5">
<span class="fs-4 fw-bold text-gray-800 d-block">All</span>
</span>
<!--end::Info-->
</label>
<!--end::Option-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
<!--begin::Radio-->
<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
<input class="form-check-input" type="radio" name="campaign_gender" value="2" />
</span>
<!--end::Radio-->
<!--begin::Info-->
<span class="ms-5">
<span class="fs-4 fw-bold text-gray-800 d-block">Male</span>
</span>
<!--end::Info-->
</label>
<!--end::Option-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
<!--begin::Radio-->
<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
<input class="form-check-input" type="radio" name="campaign_gender" value="3" />
</span>
<!--end::Radio-->
<!--begin::Info-->
<span class="ms-5">
<span class="fs-4 fw-bold text-gray-800 d-block">Female</span>
</span>
<!--end::Info-->
</label>
<!--end::Option-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Age
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Select the minimum and maximum age of the people who will find your ad relevant."></i></label>
<!--End::Label-->
<!--begin::Slider-->
<div class="d-flex flex-stack">
<div id="kt_modal_create_campaign_age_min" class="fs-7 fw-semibold text-muted"></div>
<div id="kt_modal_create_campaign_age_slider" class="noUi-sm w-100 ms-5 me-8"></div>
<div id="kt_modal_create_campaign_age_max" class="fs-7 fw-semibold text-muted"></div>
</div>
<!--end::Slider-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Location
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Enter one or more location points for more specific targeting."></i></label>
<!--End::Label-->
<!--begin::Tagify-->
<input class="form-control d-flex align-items-center" value="" id="kt_modal_create_campaign_location" data-kt-flags-path="media/flags/"/>
<!--end::Tagify-->
</div>
<!--end::Input group-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 3-->

View File

@ -0,0 +1,62 @@
<!--begin::Step 4-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Budget Estimates</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check
<a href="#" class="link-primary">Campaign Guidelines</a></div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Campaign Duration
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Choose how long you want your ad to run for"></i></label>
<!--end::Label-->
<!--begin::Duration option-->
<div class="d-flex gap-9 mb-7">
<!--begin::Button-->
<button type="button" class="btn btn-outline btn-outline-dashed btn-active-light-primary active" id="kt_modal_create_campaign_duration_all">Continuous duration
<br />
<span class="fs-7">Your ad will run continuously for a daily budget.</span></button>
<!--end::Button-->
<!--begin::Button-->
<button type="button" class="btn btn-outline btn-outline-dashed btn-active-light-primary btn-outline-default" id="kt_modal_create_campaign_duration_fixed">Fixed duration
<br />
<span class="fs-7">Your ad will run on the specified dates only.</span></button>
<!--end::Button-->
</div>
<!--end::Duration option-->
<!--begin::Datepicker-->
<input class="form-control form-control-solid d-none" placeholder="Pick date &amp; time" id="kt_modal_create_campaign_datepicker" />
<!--end::Datepicker-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Daily Budget
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Choose the budget allocated for each day. Higher budget will generate better results"></i></label>
<!--end::Label-->
<!--begin::Slider-->
<div class="d-flex flex-column text-center">
<div class="d-flex align-items-start justify-content-center mb-7">
<span class="fw-bold fs-4 mt-1 me-2">$</span>
<span class="fw-bold fs-3x" id="kt_modal_create_campaign_budget_label"></span>
<span class="fw-bold fs-3x">.00</span>
</div>
<div id="kt_modal_create_campaign_budget_slider" class="noUi-sm"></div>
</div>
<!--end::Slider-->
</div>
<!--end::Input group-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 4-->

View File

@ -0,0 +1,28 @@
<!--begin::Step 5-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-12 text-center">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Campaign Created!</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="fw-semibold text-muted fs-4">You will receive an email with with the summary of your newly created campaign!</div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Actions-->
<div class="d-flex flex-center pb-20">
<button id="kt_modal_create_campaign_create_new" type="button" class="btn btn-lg btn-light me-3" data-kt-element="complete-start">Create New Campaign</button>
<a href="" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" title="Coming Soon">View Campaign</a>
</div>
<!--end::Actions-->
<!--begin::Illustration-->
<div class="text-center px-4">
<img src="{{ asset('illustrations/sketchy-1/9.png') }}" alt="" class="mww-100 mh-350px" />
</div>
<!--end::Illustration-->
</div>
</div>
<!--end::Step 5-->

View File

@ -0,0 +1,86 @@
<!--begin::Modal - Create Project-->
<div class="modal fade" id="kt_modal_create_project" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-fullscreen p-9">
<!--begin::Modal content-->
<div class="modal-content modal-rounded">
<!--begin::Modal header-->
<div class="modal-header">
<!--begin::Modal title-->
<h2>Create Project</h2>
<!--end::Modal title-->
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
{!! getSvgIcon('duotune/arrows/arr061.svg', 'svg-icon svg-icon-1') !!}
</div>
<!--end::Close-->
</div>
<!--end::Modal header-->
<!--begin::Modal body-->
<div class="modal-body scroll-y m-5">
<!--begin::Stepper-->
<div class="stepper stepper-links d-flex flex-column" id="kt_modal_create_project_stepper">
<!--begin::Container-->
<div class="container">
<!--begin::Nav-->
<div class="stepper-nav justify-content-center py-2">
<!--begin::Step 1-->
<div class="stepper-item me-5 me-md-15 current" data-kt-stepper-element="nav">
<h3 class="stepper-title">Project Type</h3>
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
<h3 class="stepper-title">Project Settings</h3>
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
<h3 class="stepper-title">Budget</h3>
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
<h3 class="stepper-title">Build A Team</h3>
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
<h3 class="stepper-title">Set First Target</h3>
</div>
<!--end::Step 5-->
<!--begin::Step 6-->
<div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
<h3 class="stepper-title">Upload Files</h3>
</div>
<!--end::Step 6-->
<!--begin::Step 7-->
<div class="stepper-item" data-kt-stepper-element="nav">
<h3 class="stepper-title">Completed</h3>
</div>
<!--end::Step 7-->
</div>
<!--end::Nav-->
<!--begin::Form-->
<form class="mx-auto w-100 mw-600px pt-15 pb-10" novalidate="novalidate" id="kt_modal_create_project_form" method="post">
@incldue('partials/modals/create-project/steps/type')
@incldue('partials/modals/create-project/steps/settings')
@incldue('partials/modals/create-project/steps/budget')
@incldue('partials/modals/create-project/steps/team')
@incldue('partials/modals/create-project/steps/targets')
@incldue('partials/modals/create-project/steps/files')
@incldue('partials/modals/create-project/steps/complete')
</form>
<!--end::Form-->
</div>
<!--begin::Container-->
</div>
<!--end::Stepper-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - Create Project-->

View File

@ -0,0 +1,121 @@
<!--begin::Budget-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Budget</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check
<a href="#" class="link-primary">Project Guidelines</a></div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
<span class="required">Setup Budget</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content="&lt;div class='p-4 rounded bg-light'&gt; &lt;div class='d-flex flex-stack text-muted mb-4'&gt; &lt;i class='fas fa-university fs-3 me-3'&gt;&lt;/i&gt; &lt;div class='fw-bold'&gt;INCBANK **** 1245 STATEMENT&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack fw-semibold text-gray-600'&gt; &lt;div&gt;Amount&lt;/div&gt; &lt;div&gt;Transaction&lt;/div&gt; &lt;/div&gt; &lt;div class='separator separator-dashed my-2'&gt;&lt;/div&gt; &lt;div class='d-flex flex-stack text-dark fw-bold mb-2'&gt; &lt;div&gt;USD345.00&lt;/div&gt; &lt;div&gt;KEENTHEMES*&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack text-muted mb-2'&gt; &lt;div&gt;USD75.00&lt;/div&gt; &lt;div&gt;Hosting fee&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack text-muted'&gt; &lt;div&gt;USD3,950.00&lt;/div&gt; &lt;div&gt;Payrol&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;"></i>
</label>
<!--end::Label-->
<!--begin::Dialer-->
<div class="position-relative w-lg-250px" id="kt_modal_create_project_budget_setup" data-kt-dialer="true" data-kt-dialer-min="50" data-kt-dialer-max="50000" data-kt-dialer-step="100" data-kt-dialer-prefix="$" data-kt-dialer-decimals="2">
<!--begin::Decrease control-->
<button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 start-0" data-kt-dialer-control="decrease">{!! getSvgIcon('duotune/general/gen042.svg', 'svg-icon svg-icon-1') !!}</button>
<!--end::Decrease control-->
<!--begin::Input control-->
<input type="text" class="form-control form-control-solid border-0 ps-12" data-kt-dialer-control="input" placeholder="Amount" name="budget_setup" readonly="readonly" value="$50" />
<!--end::Input control-->
<!--begin::Increase control-->
<button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 end-0" data-kt-dialer-control="increase">{!! getSvgIcon('duotune/general/gen041.svg', 'svg-icon svg-icon-1') !!}</button>
<!--end::Increase control-->
</div>
<!--end::Dialer-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Budget Usage</label>
<!--end::Label-->
<!--begin::Row-->
<div class="row g-9" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
<!--begin::Col-->
<div class="col-md-6 col-lg-12 col-xxl-6">
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
<!--begin::Radio-->
<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
<input class="form-check-input" type="radio" name="budget_usage" value="1" checked="checked" />
</span>
<!--end::Radio-->
<!--begin::Info-->
<span class="ms-5">
<span class="fs-4 fw-bold text-gray-800 mb-2 d-block">Precise Usage</span>
<span class="fw-semibold fs-7 text-gray-600">Withdraw money to your bank account per transaction under $50,000 budget</span>
</span>
<!--end::Info-->
</label>
<!--end::Option-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-6 col-lg-12 col-xxl-6">
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
<!--begin::Radio-->
<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
<input class="form-check-input" type="radio" name="budget_usage" value="2" />
</span>
<!--end::Radio-->
<!--begin::Info-->
<span class="ms-5">
<span class="fs-4 fw-bold text-gray-800 mb-2 d-block">Extreme Usage</span>
<span class="fw-semibold fs-7 text-gray-600">Withdraw money to your bank account per transaction under $50,000 budget</span>
</span>
<!--end::Info-->
</label>
<!--end::Option-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-15">
<!--begin::Wrapper-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-semibold">Allow Changes in Budget</label>
<div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1" name="budget_allow" checked="checked" />
<span class="form-check-label fw-semibold text-muted">Allowed</span>
</label>
<!--end::Switch-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex flex-stack">
<button type="button" class="btn btn-lg btn-light me-3" data-kt-element="budget-previous">Project Settings</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-element="budget-next">
<span class="indicator-label">Build Team</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Budget-->

View File

@ -0,0 +1,28 @@
<!--begin::Complete-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-12 text-center">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Project Created!</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check how to create project</div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Actions-->
<div class="d-flex flex-center pb-20">
<button type="button" class="btn btn-lg btn-light me-3" data-kt-element="complete-start">Create New Project</button>
<a href="" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" title="Coming Soon">View Project</a>
</div>
<!--end::Actions-->
<!--begin::Illustration-->
<div class="text-center px-4">
<img src="{{ asset('illustrations/sketchy-1/9.png') }}" alt="" class="mww-100 mh-350px" />
</div>
<!--end::Illustration-->
</div>
</div>
<!--end::Complete-->

View File

@ -0,0 +1,214 @@
<!--begin::Files-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Upload Files</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check
<a href="#" class="link-primary">Project Guidelines</a></div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Dropzone-->
<div class="dropzone" id="kt_modal_create_project_files_upload">
<!--begin::Message-->
<div class="dz-message needsclick">
<!--begin::Icon-->
{!! getSvgIcon('duotune/files/fil010.svg', 'svg-icon svg-icon-3hx svg-icon-primary') !!}
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-4">
<h3 class="dfs-3 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
<span class="fw-semibold fs-4 text-muted">Upload up to 10 files</span>
</div>
<!--end::Info--></div>
</div>
<!--end::Dropzone-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-8">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Uploaded File</label>
<!--End::Label-->
<!--begin::Files-->
<div class="mh-300px scroll-y me-n7 pe-7">
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/pdf.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Avionica Technical Requirements</a>
<div class="fw-semibold text-muted">230kb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/doc.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">9 Degree CURD draftplan</a>
<div class="fw-semibold text-muted">3.6mb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/css.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">User CRUD Styles</a>
<div class="fw-semibold text-muted">85kb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/ai.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Design Initial Logo</a>
<div class="fw-semibold text-muted">40kb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
<!--begin::File-->
<div class="d-flex flex-stack py-4">
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px">
<img src="{{ image('svg/files/tif.svg') }}" alt="icon" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-6">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Tower Hill Bilboard</a>
<div class="fw-semibold text-muted">27mb</div>
</div>
<!--end::Details-->
</div>
<!--begin::Menu-->
<div class="min-w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
<option></option>
<option value="1">Remove</option>
<option value="2">Modify</option>
<option value="3">Select</option>
</select>
</div>
<!--end::Menu-->
</div>
<!--end::File-->
</div>
<!--end::Files-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Wrapper-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-semibold">Allow Changes in Budget</label>
<div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1" name="target_allow" checked="checked" />
<span class="form-check-label fw-semibold text-muted">Allowed</span>
</label>
<!--end::Switch-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex flex-stack">
<button type="button" class="btn btn-lg btn-light me-3" data-kt-element="files-previous">Set First Target</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-element="files-next">
<span class="indicator-label">Complete</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Files-->

View File

@ -0,0 +1,139 @@
<!--begin::Settings-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Project Settings</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check
<a href="#" class="link-primary">Project Guidelines</a></div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Dropzone-->
<div class="dropzone" id="kt_modal_create_project_settings_logo">
<!--begin::Message-->
<div class="dz-message needsclick">
<!--begin::Icon-->
{!! getSvgIcon('duotune/files/fil010.svg', 'svg-icon svg-icon-3hx svg-icon-primary') !!}
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-4">
<h3 class="dfs-3 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
<span class="fw-semibold fs-4 text-muted">Upload up to 10 files</span>
</div>
<!--end::Info--></div>
</div>
<!--end::Dropzone-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Label-->
<label class="required fs-6 fw-semibold mb-2">Customer</label>
<!--end::Label-->
<!--begin::Input-->
<select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select..." name="settings_customer">
<option></option>
<option value="1">Keenthemes</option>
<option value="2">CRM App</option>
</select>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-semibold form-label mb-2">
<span class="required">Project Name</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify project name"></i>
</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-solid" placeholder="Enter Project Name" value="StockPro Mobile App" name="settings_name" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Label-->
<label class="required fs-6 fw-semibold mb-2">Project Description</label>
<!--end::Label-->
<!--begin::Input-->
<textarea class="form-control form-control-solid" rows="3" placeholder="Enter Project Description" name="settings_description">Experience share market at your fingertips with TICK PRO stock investment mobile trading app</textarea>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Label-->
<label class="required fs-6 fw-semibold mb-2">Release Date</label>
<!--end::Label-->
<!--begin::Wrapper-->
<div class="position-relative d-flex align-items-center">
<!--begin::Icon-->
{!! getSvgIcon('duotune/general/gen014.svg', 'svg-icon svg-icon-2 position-absolute mx-4') !!}
<!--end::Icon-->
<!--begin::Input-->
<input class="form-control form-control-solid ps-12" placeholder="Pick date range" name="settings_release_date" />
<!--end::Input--></div>
<!--end::Wrapper-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-15">
<!--begin::Wrapper-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="required fs-6 fw-semibold">Notifications</label>
<div class="fs-7 fw-semibold text-muted">Allow Notifications by Phone or Email</div>
</div>
<!--end::Label-->
<!--begin::Checkboxes-->
<div class="d-flex">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-10">
<!--begin::Input-->
<input class="form-check-input h-20px w-20px" type="checkbox" value="email" name="settings_notifications[]" />
<!--end::Input-->
<!--begin::Label-->
<span class="form-check-label fw-semibold">Email</span>
<!--end::Label-->
</label>
<!--end::Checkbox-->
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input h-20px w-20px" type="checkbox" value="phone" checked="checked" name="settings_notifications[]" />
<!--end::Input-->
<!--begin::Label-->
<span class="form-check-label fw-semibold">Phone</span>
<!--end::Label-->
</label>
<!--end::Checkbox-->
</div>
<!--end::Checkboxes-->
</div>
<!--begin::Wrapper-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex flex-stack">
<button type="button" class="btn btn-lg btn-light me-3" data-kt-element="settings-previous">Project Type</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-element="settings-next">
<span class="indicator-label">Budget</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Settings-->

View File

@ -0,0 +1,134 @@
<!--begin::Targets-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Set First Target</h1>
<!--end::Title-->
<!--begin::Title-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check
<a href="#" class="link-primary">Project Guidelines</a></div>
<!--end::Title-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<label class="fs-6 fw-semibold mb-2">Target Title</label>
<input type="text" class="form-control form-control-solid" placeholder="Enter Target Title" name="Project Launch" />
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row g-9 mb-8">
<!--begin::Col-->
<div class="col-md-6 fv-row">
<label class="required fs-6 fw-semibold mb-2">Assign</label>
<select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member" name="target_assign">
<option></option>
<option value="1">Karina Clark</option>
<option value="2" selected="selected">Robert Doe</option>
<option value="3">Niel Owen</option>
<option value="4">Olivia Wild</option>
<option value="5">Sean Bean</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-6 fv-row">
<label class="required fs-6 fw-semibold mb-2">Due Date</label>
<div class="position-relative d-flex align-items-center">
<!--begin::Icon-->
{!! getSvgIcon('duotune/general/gen014.svg', 'svg-icon svg-icon-2 position-absolute mx-4') !!}
<!--end::Icon-->
<!--begin::Datepicker-->
<input class="form-control form-control-solid ps-12" placeholder="Pick date range" name="target_due_date" />
<!--end::Datepicker--></div>
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<label class="fs-6 fw-semibold mb-2">Target Details</label>
<textarea class="form-control form-control-solid" rows="2" name="target_details" placeholder="Type Target Details">Experience share market at your fingertips with TICK PRO stock investment mobile trading app</textarea>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<label class="required fs-6 fw-semibold mb-2">Tags</label>
<input class="form-control form-control-solid" value="Important, Urgent" name="target_tags" />
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-8">
<!--begin::Wrapper-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-semibold">Allow Changes in Budget</label>
<div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1" name="target_allow" checked="checked" />
<span class="form-check-label fw-semibold text-muted">Allowed</span>
</label>
<!--end::Switch-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-15">
<!--begin::Wrapper-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-semibold">Notifications</label>
<div class="fs-7 fw-semibold text-muted">Allow Notifications by Phone or Email</div>
</div>
<!--end::Label-->
<!--begin::Checkboxes-->
<div class="d-flex">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-10">
<!--begin::Input-->
<input class="form-check-input h-20px w-20px" type="checkbox" value="email" name="target_notifications[]" />
<!--end::Input-->
<!--begin::Label-->
<span class="form-check-label fw-semibold">Email</span>
<!--end::Label-->
</label>
<!--end::Checkbox-->
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input h-20px w-20px" type="checkbox" value="phone" checked="checked" name="target_notifications[]" />
<!--end::Input-->
<!--begin::Label-->
<span class="form-check-label fw-semibold">Phone</span>
<!--end::Label-->
</label>
<!--end::Checkbox-->
</div>
<!--end::Checkboxes-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex flex-stack">
<button type="button" class="btn btn-lg btn-light me-3" data-kt-element="targets-previous">Build a Team</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-element="targets-next">
<span class="indicator-label">Upload Files</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Targets-->

View File

@ -0,0 +1,541 @@
<!--begin::Team-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Build a Team</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check
<a href="#" class="link-primary">Project Guidelines</a></div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="mb-8">
<!--begin::Label-->
<label class="fs-6 fw-semibold mb-2">Invite Teammates</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-solid" placeholder="Add project memnbers by name or email.." name="invite_teammates" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-8">
<!--begin::Label-->
<div class="fs-6 fw-semibold mb-2">Team Members</div>
<!--end::Label-->
<!--begin::Users-->
<div class="mh-300px scroll-y me-n7 pe-7">
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-6.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Smith</a>
<div class="fw-semibold text-muted">smith@kpmg.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">M</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Melody Macy</a>
<div class="fw-semibold text-muted">melody@altbox.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-1.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Max Smith</a>
<div class="fw-semibold text-muted">max@kt.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-5.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sean Bean</a>
<div class="fw-semibold text-muted">sean@dellito.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-25.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Brian Cox</a>
<div class="fw-semibold text-muted">brian@exchange.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-warning text-warning fw-semibold">C</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Mikaela Collins</a>
<div class="fw-semibold text-muted">mik@pex.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-9.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Francis Mitcham</a>
<div class="fw-semibold text-muted">f.mit@kpmg.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">O</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Olivia Wild</a>
<div class="fw-semibold text-muted">olivia@corpmail.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-primary text-primary fw-semibold">N</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Neil Owen</a>
<div class="fw-semibold text-muted">owen.neil@gmail.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-23.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dan Wilson</a>
<div class="fw-semibold text-muted">dam@consilting.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">E</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Bold</a>
<div class="fw-semibold text-muted">emma@intenso.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-12.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ana Crown</a>
<div class="fw-semibold text-muted">ana.cf@limtel.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-info text-info fw-semibold">A</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Robert Doe</a>
<div class="fw-semibold text-muted">robert@benko.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-13.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">John Miller</a>
<div class="fw-semibold text-muted">miller@mapple.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-success text-success fw-semibold">L</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lucy Kunic</a>
<div class="fw-semibold text-muted">lucy.m@fentech.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="{{ image('avatars/300-21.jpg') }}" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ethan Wilder</a>
<div class="fw-semibold text-muted">ethan@loop.com.au</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-info text-info fw-semibold">A</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Robert Doe</a>
<div class="fw-semibold text-muted">robert@benko.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
</div>
<!--end::Users-->
</div>
<!--end::Input group-->
<!--begin::Notice-->
<div class="d-flex flex-stack mb-15">
<!--begin::Label-->
<div class="me-5 fw-semibold">
<label class="fs-6">Adding Users by Team Members</label>
<div class="fs-7 text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" checked="checked" />
</label>
<!--end::Switch-->
</div>
<!--end::Notice-->
<!--begin::Actions-->
<div class="d-flex flex-stack">
<button type="button" class="btn btn-lg btn-light me-3" data-kt-element="team-previous">Budget</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-element="team-next">
<span class="indicator-label">Set Target</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Team-->

View File

@ -0,0 +1,70 @@
<!--begin::Type-->
<div class="current" data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-7 pb-lg-12">
<!--begin::Title-->
<h1 class="fw-bold text-dark">Project Type</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-semibold fs-4">If you need more info, please check out
<a href="#" class="link-primary fw-bold">FAQ Page</a></div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-15" data-kt-buttons="true">
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6 mb-6 active">
<!--begin::Input-->
<input class="btn-check" type="radio" checked="checked" name="project_type" value="1" />
<!--end::Input-->
<!--begin::Label-->
<span class="d-flex">
<!--begin::Icon-->
{!! getSvgIcon('duotune/communication/com006.svg', 'svg-icon svg-icon-3hx') !!}
<!--end::Icon-->
<!--begin::Info-->
<span class="ms-4">
<span class="fs-3 fw-bold text-gray-900 mb-2 d-block">Personal Project</span>
<span class="fw-semibold fs-4 text-muted">If you need more info, please check it out</span>
</span>
<!--end::Info--></span>
<!--end::Label-->
</label>
<!--end::Option-->
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6">
<!--begin::Input-->
<input class="btn-check" type="radio" name="project_type" value="2" />
<!--end::Input-->
<!--begin::Label-->
<span class="d-flex">
<!--begin::Icon-->
{!! getSvgIcon('duotune/general/gen002.svg', 'svg-icon svg-icon-3hx') !!}
<!--end::Icon-->
<!--begin::Info-->
<span class="ms-4">
<span class="fs-3 fw-bold text-gray-900 mb-2 d-block">Team Project</span>
<span class="fw-semibold fs-4 text-muted">Create corporate account to manage users</span>
</span>
<!--end::Info--></span>
<!--end::Label-->
</label>
<!--end::Option-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-lg btn-primary" data-kt-element="type-next">
<span class="indicator-label">Project Settings</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Type-->

View File

@ -0,0 +1,120 @@
<!--begin::Input group-->
<div class="d-flex flex-column mb-7 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-semibold form-label mb-2">
<span class="required">Name On Card</span>
<span class="ms-1" data-bs-toggle="tooltip" title="Specify a card holder's name"></span>
</label>
<!--end::Label-->
<input type="text" class="form-control form-control-solid" placeholder="" name="card_name" value="Max Doe" />
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-7 fv-row">
<!--begin::Label-->
<label class="required fs-6 fw-semibold form-label mb-2">Card Number</label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative">
<!--begin::Input-->
<input type="text" class="form-control form-control-solid" placeholder="Enter card number" name="card_number" value="4111 1111 1111 1111" />
<!--end::Input-->
<!--begin::Card logos-->
<div class="position-absolute translate-middle-y top-50 end-0 me-5">
<img src="assets/media/svg/card-logos/visa.svg" alt="" class="h-25px" />
<img src="assets/media/svg/card-logos/mastercard.svg" alt="" class="h-25px" />
<img src="assets/media/svg/card-logos/american-express.svg" alt="" class="h-25px" />
</div>
<!--end::Card logos-->
</div>
<!--end::Input wrapper-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row mb-10">
<!--begin::Col-->
<div class="col-md-8 fv-row">
<!--begin::Label-->
<label class="required fs-6 fw-semibold form-label mb-2">Expiration Date</label>
<!--end::Label-->
<!--begin::Row-->
<div class="row fv-row">
<!--begin::Col-->
<div class="col-6">
<select name="card_expiry_month" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Month">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<select name="card_expiry_year" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Year">
<option></option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
</select>
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-4 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-semibold form-label mb-2">
<span class="required">CVV</span>
<span class="ms-1" data-bs-toggle="tooltip" title="Enter a card CVV code"></span>
</label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative">
<!--begin::Input-->
<input type="text" class="form-control form-control-solid" minlength="3" maxlength="4" placeholder="CVV" name="card_cvv" />
<!--end::Input-->
<!--begin::CVV icon-->
<div class="position-absolute translate-middle-y top-50 end-0 me-3">{!! getIcon('credit-cart', 'fs-2hx') !!}</div>
<!--end::CVV icon-->
</div>
<!--end::Input wrapper-->
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-semibold form-label">Save Card for further billing?</label>
<div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1" checked="checked" />
<span class="form-check-label fw-semibold text-muted">Save Card</span>
</label>
<!--end::Switch-->
</div>
<!--end::Input group-->

View File

@ -0,0 +1,60 @@
<!--begin::Modal - Users Search-->
<div class="modal fade" id="kt_modal_users_search" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-dialog-centered mw-650px">
<!--begin::Modal content-->
<div class="modal-content">
<!--begin::Modal header-->
<div class="modal-header pb-0 border-0 justify-content-end">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
<!--end::Close-->
</div>
<!--begin::Modal header-->
<!--begin::Modal body-->
<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
<!--begin::Content-->
<div class="text-center mb-13">
<h1 class="mb-3">Search Users</h1>
<div class="text-muted fw-semibold fs-5">Invite Collaborators To Your Project</div>
</div>
<!--end::Content-->
<!--begin::Search-->
<div id="kt_modal_users_search_handler" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="inline">
<!--begin::Form-->
<form data-kt-search-element="form" class="w-100 position-relative mb-5" autocomplete="off">
<!--begin::Hidden input(Added to disable form autocomplete)-->
<input type="hidden" />
<!--end::Hidden input-->
<!--begin::Icon-->
{!! getIcon('magnifier', 'fs-2 fs-lg-1 text-gray-500 position-absolute top-50 ms-5 translate-middle-y') !!}
<!--end::Icon-->
<!--begin::Input-->
<input type="text" class="form-control form-control-lg form-control-solid px-15" name="search" value="" placeholder="Search by username, full name or email..." data-kt-search-element="input" />
<!--end::Input-->
<!--begin::Spinner-->
<span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-5" data-kt-search-element="spinner">
<span class="spinner-border h-15px w-15px align-middle text-muted"></span>
</span>
<!--end::Spinner-->
<!--begin::Reset-->
<span class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 me-5 d-none" data-kt-search-element="clear">{!! getIcon('cross', 'fs-2 fs-lg-1 me-0') !!}</span>
<!--end::Reset--></form>
<!--end::Form-->
<!--begin::Wrapper-->
<div class="py-5">
@include('partials/modals/users-search/partials/_suggestions')
@include('partials/modals/users-search/partials/_results')
@include('partials/modals/users-search/partials/_empty')
</div>
<!--end::Wrapper-->
</div>
<!--end::Search-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - Users Search-->

View File

@ -0,0 +1,15 @@
<!--begin::Empty-->
<div data-kt-search-element="empty" class="text-center d-none">
<!--begin::Message-->
<div class="fw-semibold py-10">
<div class="text-gray-600 fs-3 mb-2">No users found</div>
<div class="text-muted fs-6">Try to search by username, full name or email...</div>
</div>
<!--end::Message-->
<!--begin::Illustration-->
<div class="text-center px-5">
<img src="assets/media/illustrations/sketchy-1/1.png" alt="" class="w-100 h-200px h-sm-325px" />
</div>
<!--end::Illustration-->
</div>
<!--end::Empty-->

View File

@ -0,0 +1,623 @@
<!--begin::Results(add d-none to below element to hide the users list by default)-->
<div data-kt-search-element="results" class="d-none">
<!--begin::Users-->
<div class="mh-375px scroll-y me-n7 pe-7">
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="0">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='0']" value="0" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-6.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Smith</a>
<div class="fw-semibold text-muted">smith@kpmg.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="1">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='1']" value="1" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">M</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Melody Macy</a>
<div class="fw-semibold text-muted">melody@altbox.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="2">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='2']" value="2" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-1.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Max Smith</a>
<div class="fw-semibold text-muted">max@kt.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="3">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='3']" value="3" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-5.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sean Bean</a>
<div class="fw-semibold text-muted">sean@dellito.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="4">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='4']" value="4" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-25.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Brian Cox</a>
<div class="fw-semibold text-muted">brian@exchange.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="5">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='5']" value="5" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-warning text-warning fw-semibold">C</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Mikaela Collins</a>
<div class="fw-semibold text-muted">mik@pex.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="6">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='6']" value="6" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-9.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Francis Mitcham</a>
<div class="fw-semibold text-muted">f.mit@kpmg.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="7">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='7']" value="7" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">O</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Olivia Wild</a>
<div class="fw-semibold text-muted">olivia@corpmail.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="8">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='8']" value="8" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-primary text-primary fw-semibold">N</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Neil Owen</a>
<div class="fw-semibold text-muted">owen.neil@gmail.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="9">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='9']" value="9" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-23.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dan Wilson</a>
<div class="fw-semibold text-muted">dam@consilting.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="10">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='10']" value="10" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-semibold">E</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Bold</a>
<div class="fw-semibold text-muted">emma@intenso.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="11">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='11']" value="11" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-12.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ana Crown</a>
<div class="fw-semibold text-muted">ana.cf@limtel.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="12">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='12']" value="12" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-info text-info fw-semibold">A</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Robert Doe</a>
<div class="fw-semibold text-muted">robert@benko.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="13">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='13']" value="13" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-13.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">John Miller</a>
<div class="fw-semibold text-muted">miller@mapple.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="14">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='14']" value="14" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-success text-success fw-semibold">L</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lucy Kunic</a>
<div class="fw-semibold text-muted">lucy.m@fentech.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="15">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='15']" value="15" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="assets/media/avatars/300-21.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ethan Wilder</a>
<div class="fw-semibold text-muted">ethan@loop.com.au</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::Separator-->
<div class="border-bottom border-gray-300 border-bottom-dashed"></div>
<!--end::Separator-->
<!--begin::User-->
<div class="rounded d-flex flex-stack bg-active-lighten p-4" data-user-id="16">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" name="users" data-kt-check="true" data-kt-check-target="[data-user-id='16']" value="16" />
</label>
<!--end::Checkbox-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-info text-info fw-semibold">A</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Robert Doe</a>
<div class="fw-semibold text-muted">robert@benko.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
</div>
<!--end::Users-->
<!--begin::Actions-->
<div class="d-flex flex-center mt-15">
<button type="reset" id="kt_modal_users_search_reset" data-bs-dismiss="modal" class="btn btn-active-light me-3">Cancel</button>
<button type="submit" id="kt_modal_users_search_submit" class="btn btn-primary">Add Selected Users</button>
</div>
<!--end::Actions-->
</div>
<!--end::Results-->

View File

@ -0,0 +1,86 @@
<!--begin::Suggestions-->
<div data-kt-search-element="suggestions">
<!--begin::Heading-->
<h3 class="fw-semibold mb-5">Recently searched:</h3>
<!--end::Heading-->
<!--begin::Users-->
<div class="mh-375px scroll-y me-n7 pe-7">
<!--begin::User-->
<a href="#" class="d-flex align-items-center p-3 rounded bg-state-light bg-state-opacity-50 mb-1">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle me-5">
<img alt="Pic" src="assets/media/avatars/300-6.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Info-->
<div class="fw-semibold">
<span class="fs-6 text-gray-800 me-2">Emma Smith</span>
<span class="badge badge-light">Art Director</span>
</div>
<!--end::Info-->
</a>
<!--end::User-->
<!--begin::User-->
<a href="#" class="d-flex align-items-center p-3 rounded bg-state-light bg-state-opacity-50 mb-1">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle me-5">
<span class="symbol-label bg-light-danger text-danger fw-semibold">M</span>
</div>
<!--end::Avatar-->
<!--begin::Info-->
<div class="fw-semibold">
<span class="fs-6 text-gray-800 me-2">Melody Macy</span>
<span class="badge badge-light">Marketing Analytic</span>
</div>
<!--end::Info-->
</a>
<!--end::User-->
<!--begin::User-->
<a href="#" class="d-flex align-items-center p-3 rounded bg-state-light bg-state-opacity-50 mb-1">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle me-5">
<img alt="Pic" src="assets/media/avatars/300-1.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Info-->
<div class="fw-semibold">
<span class="fs-6 text-gray-800 me-2">Max Smith</span>
<span class="badge badge-light">Software Enginer</span>
</div>
<!--end::Info-->
</a>
<!--end::User-->
<!--begin::User-->
<a href="#" class="d-flex align-items-center p-3 rounded bg-state-light bg-state-opacity-50 mb-1">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle me-5">
<img alt="Pic" src="assets/media/avatars/300-5.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Info-->
<div class="fw-semibold">
<span class="fs-6 text-gray-800 me-2">Sean Bean</span>
<span class="badge badge-light">Web Developer</span>
</div>
<!--end::Info-->
</a>
<!--end::User-->
<!--begin::User-->
<a href="#" class="d-flex align-items-center p-3 rounded bg-state-light bg-state-opacity-50 mb-1">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle me-5">
<img alt="Pic" src="assets/media/avatars/300-25.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Info-->
<div class="fw-semibold">
<span class="fs-6 text-gray-800 me-2">Brian Cox</span>
<span class="badge badge-light">UI/UX Designer</span>
</div>
<!--end::Info-->
</a>
<!--end::User-->
</div>
<!--end::Users-->
</div>
<!--end::Suggestions-->