461 lines
16 KiB
HTML
461 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}" class="h-100">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>Magico company dashboard</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="@@vars.themeFont" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<!-- bundlecss:vendor [@@autopath] -->
|
|
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/quill/dist/quill.snow.css">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
|
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
|
</head>
|
|
|
|
<body class="h-100">
|
|
<!-- ========== HEADER ========== -->
|
|
@@include("@@autopath/magico_partials/magico-topbar.html", {
|
|
"topbarcategory": "demos",
|
|
"topbarlink": "main",
|
|
"category": "account",
|
|
"subcategory": "",
|
|
"link": "account-overview.html",
|
|
"logo": "magico-company"
|
|
})
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main" class="bg-light company">
|
|
<!-- Breadcrumb -->
|
|
<div class="navbar-dark bg-dark" style="background-image: url(@@autopath/assets/svg/components/wave-pattern-light.svg);">
|
|
<div class="container container-big content-space-1 content-space-b-lg-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-none d-lg-block">
|
|
<h1 class="h2 text-white">Karczma Biesiada</h1>
|
|
</div>
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb breadcrumb-light mb-0">
|
|
<li class="breadcrumb-item">company.magico</li>
|
|
<li class="breadcrumb-item active" aria-current="page">Zespół</li>
|
|
</ol>
|
|
</nav>
|
|
<!-- End Breadcrumb -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Responsive Toggle Button -->
|
|
<button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarNav" aria-controls="sidebarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</button>
|
|
<!-- End Responsive Toggle Button -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Breadcrumb -->
|
|
|
|
<!-- Content -->
|
|
<div class="container container-big content-space-1 content-space-t-lg-0 content-space-b-lg-2 mt-lg-n10">
|
|
<div class="row h-100">
|
|
<div class="col-lg-3 col-xxl-2">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg navbar-light">
|
|
<div id="sidebarNav" class="collapse navbar-collapse navbar-vertical">
|
|
<!-- Card -->
|
|
<div class="card flex-grow-1 mb-5">
|
|
<div class="card-body">
|
|
<!-- Nav -->
|
|
@@include("@@autopath/magico_partials/magico-company-menu.html", {
|
|
"link": "magico-company-team.html"
|
|
})
|
|
<!-- End Nav -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-9 col-xxl-10 comapny-dashboard">
|
|
<div class="d-grid gap-3 gap-lg-5">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Zarządzaj Twoim zespołem</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Card -->
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">Dodaj innych właścicieli, managerów lub pracowników firmy. Wprowadź ich adres e-mail w poniższym polu. Możesz też pominać ten krok i zrobić to później.</label>
|
|
|
|
<!-- Search -->
|
|
<div class="mb-4 mt-4">
|
|
<form>
|
|
<!-- Input Card -->
|
|
<div class="input-card border">
|
|
<div class="input-card-form">
|
|
<label for="searchAppsForm" class="form-label visually-hidden">Wprowadź adres e-mail</label>
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-search"></i>
|
|
</span>
|
|
<input type="text" class="form-control" id="searchAppsForm" placeholder="Wprowadź adres e-mail" aria-label="Wprowadź adres e-mail">
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#moremodal">
|
|
<i class="bi-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
<!-- End Input Card -->
|
|
|
|
|
|
</form>
|
|
</div>
|
|
<!-- End Search -->
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
|
|
|
|
<div class="table-responsive" style="padding-bottom: 120px;">
|
|
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Użytkownik</th>
|
|
<th>Uprawnienia</th>
|
|
<th style="width: 5%;"></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="./assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<a class="d-inline-block link-dark" href="#">
|
|
<h6 class="text-hover-primary mb-0">Amanda Harvey <img class="avatar avatar-xss ms-1" src="./assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Verified user" aria-label="Verified user"></h6>
|
|
</a>
|
|
<small class="d-block">amanda@example.com</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select" autocomplete="off"
|
|
data-hs-tom-select-options='{
|
|
"placeholder": "Wybierz rolę",
|
|
"hideSearch": true
|
|
}'>
|
|
<option value="">Wybierz rolę</option>
|
|
<option value="4">Właściciel</option>
|
|
<option value="1">Manager</option>
|
|
<option value="3">Pracownik</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</td>
|
|
<td>
|
|
<a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Usuń użytkownika">
|
|
<i class="bi-trash"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<div class="card-footer pt-0">
|
|
<div class="container">
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a class="btn btn-white" href="javascript:;">Anuluj</a>
|
|
<a class="btn btn-primary" href="javascript:;">Zapisz zmiany</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
@@include("@@autopath/magico_partials/magico-footer.html")
|
|
<!-- ========== END FOOTER ========== -->
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="moremodal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<!-- Header -->
|
|
<div class="modal-close">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body">
|
|
<!-- Sign up -->
|
|
<div id="signupModalFormSignup">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-5">
|
|
<h2>Dodaj członka zespołu</h2>
|
|
|
|
<div class="spinner-border spinner-border-sm" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
|
|
<small>
|
|
Szukam użytkownika w id.magico
|
|
</small>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<p class="text-danger text-center mb-5">Użytkownik o adresie test@magico.pl<br>
|
|
nie posiada konta id.magico.</p>
|
|
|
|
|
|
|
|
<div class="d-grid gap-3">
|
|
<a class="js-animation-link btn btn-primary btn-lg" href="#"
|
|
data-hs-show-animation-options='{
|
|
"targetSelector": "#signupModalFormSignupWithEmail",
|
|
"groupName": "idForm"
|
|
}'>Zaproś do rejestracji w id.magico
|
|
</a>
|
|
|
|
<a class="btn btn-white btn-lg" href="#">
|
|
<span class="d-flex justify-content-center align-items-center">
|
|
Dodaj bez połączenia z id.magico
|
|
</span>
|
|
</a>
|
|
|
|
<div class="text-center">
|
|
<p class="small mb-0">
|
|
Członek zespołu bez powiązania z id.magico nie otrzyma dostępu do aplikacji w Twojej firmie. Zobacz artkuł pomocy o <a href="#">zarządzaniu zespołem w firmie</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Sign up -->
|
|
|
|
<!-- Sign up with Modal -->
|
|
<div id="signupModalFormSignupWithEmail" style="display: none; opacity: 0;">
|
|
<!-- Heading -->
|
|
<div class="text-center text-success">
|
|
<i class="bi bi-check2-circle fs-1"></i>
|
|
<h2>Wysłano zaproszenie</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
|
|
</div>
|
|
<!-- End Sign up with Modal -->
|
|
|
|
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Modal -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Sign Up -->
|
|
@@include("@@autopath/partials/modal/signup.html")
|
|
|
|
<!-- Go To -->
|
|
@@include("@@autopath/partials/layouts-components/go-to.html")
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory @@deleteLine:build -->
|
|
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<!-- bundlejs:vendor [@@autopath] -->
|
|
<script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
|
|
<script src="@@autopath/node_modules/imask/dist/imask.min.js"></script>
|
|
<script src="@@autopath/node_modules/quill/dist/quill.min.js"></script>
|
|
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-validation.js"></script>
|
|
<script src="@@autopath/assets/js/hs.imask.js"></script>
|
|
<script src="@@autopath/assets/js/hs.quill.js"></script>
|
|
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF MEGA MENU
|
|
// =======================================================
|
|
new HSMegaMenu('.js-mega-menu', {
|
|
desktop: {
|
|
position: 'left'
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF SHOW ANIMATIONS
|
|
// =======================================================
|
|
new HSShowAnimation('.js-animation-link')
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP VALIDATION
|
|
// =======================================================
|
|
HSBsValidation.init('.js-validate', {
|
|
onSubmit: data => {
|
|
data.event.preventDefault()
|
|
alert('Submited')
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
|
|
|
|
// INITIALIZATION OF FILE ATTACH
|
|
// =======================================================
|
|
new HSFileAttach('.js-file-attach')
|
|
|
|
|
|
// INITIALIZATION OF ADD FIELD
|
|
// =======================================================
|
|
new HSAddField('.js-add-field', {
|
|
addedField: el => {
|
|
el.querySelectorAll('.js-select-dynamic').forEach(item => {
|
|
HSCore.components.HSTomSelect.init(item)
|
|
})
|
|
|
|
HSCore.components.HSMask.init('.js-input-mask-dynamic')
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF INPUT MASK
|
|
// =======================================================
|
|
HSCore.components.HSMask.init('.js-input-mask')
|
|
|
|
|
|
// INITIALIZATION OF QUILLJS EDITOR
|
|
// =======================================================
|
|
HSCore.components.HSQuill.init('.js-quill')
|
|
|
|
|
|
// INITIALIZATION OF SELECT
|
|
// =======================================================
|
|
HSCore.components.HSTomSelect.init('.js-select', {
|
|
render: {
|
|
'option': function(data, escape) {
|
|
return data.optionTemplate || `<div>${data.text}</div>>`
|
|
},
|
|
'item': function(data, escape) {
|
|
return data.optionTemplate || `<div>${data.text}</div>>`
|
|
}
|
|
}
|
|
})
|
|
|
|
// INITIALIZATION OF BOOTSTRAP VALIDATION
|
|
// =======================================================
|
|
HSBsValidation.init('.js-validate', {
|
|
onSubmit: data => {
|
|
data.event.preventDefault()
|
|
alert('Submited')
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF SHOW ANIMATIONS
|
|
// =======================================================
|
|
new HSShowAnimation('.js-animation-link')
|
|
|
|
|
|
// INITIALIZATION OF TOGGLE PASSWORD
|
|
// =======================================================
|
|
new HSTogglePassword('.js-toggle-password')
|
|
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|