database-pertani-web/resources/views/users/role/index.blade.php
2026-02-20 00:06:06 +07:00

597 lines
27 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@extends('layout.main')
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
<h4 class="mb-1">Roles List</h4>
<p class="mb-6">
A role provided access to predefined menus and features so that depending on <br />
assigned role an administrator can have access to what user needs.
</p>
<!-- Role cards -->
<div class="row g-6">
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-normal mb-0 text-body">Total 4 users</h6>
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Vinnie Mostowy"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/5.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Allen Rieske"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/12.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Julee Rossignol"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/6.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Kaith D'souza"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/3.png" alt="Avatar" />
</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-end">
<div class="role-heading">
<h5 class="mb-1">Administrator</h5>
<a
href="javascript:;"
data-bs-toggle="modal"
data-bs-target="#addRoleModal"
class="role-edit-modal"
><span>Edit Role</span></a
>
</div>
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-normal mb-0 text-body">Total 7 users</h6>
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Jimmy Ressula"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/4.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="John Doe"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Kristi Lawker"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/2.png" alt="Avatar" />
</li>
<li class="avatar">
<span
class="avatar-initial rounded-circle pull-up"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="4 more"
>+4</span
>
</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-end">
<div class="role-heading">
<h5 class="mb-1">Manager</h5>
<a
href="javascript:;"
data-bs-toggle="modal"
data-bs-target="#addRoleModal"
class="role-edit-modal"
><span>Edit Role</span></a
>
</div>
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-normal mb-0 text-body">Total 5 users</h6>
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Andrew Tye"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/6.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Rishi Swaat"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/9.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Rossie Kim"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/12.png" alt="Avatar" />
</li>
<li class="avatar">
<span
class="avatar-initial rounded-circle pull-up"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="2 more"
>+2</span
>
</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-end">
<div class="role-heading">
<h5 class="mb-1">Users</h5>
<a
href="javascript:;"
data-bs-toggle="modal"
data-bs-target="#addRoleModal"
class="role-edit-modal"
><span>Edit Role</span></a
>
</div>
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-normal mb-0 text-body">Total 3 users</h6>
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Kim Karlos"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/3.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Katy Turner"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/9.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Peter Adward"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/4.png" alt="Avatar" />
</li>
<li class="avatar">
<span
class="avatar-initial rounded-circle pull-up"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="3 more"
>+3</span
>
</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-end">
<div class="role-heading">
<h5 class="mb-1">Support</h5>
<a
href="javascript:;"
data-bs-toggle="modal"
data-bs-target="#addRoleModal"
class="role-edit-modal"
><span>Edit Role</span></a
>
</div>
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="fw-normal mb-0 text-body">Total 2 users</h6>
<ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Kim Merchent"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/10.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Sam D'souza"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/13.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Nurvi Karlos"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/5.png" alt="Avatar" />
</li>
<li class="avatar">
<span
class="avatar-initial rounded-circle pull-up"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="7 more"
>+7</span
>
</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-end">
<div class="role-heading">
<h5 class="mb-1">Restricted User</h5>
<a
href="javascript:;"
data-bs-toggle="modal"
data-bs-target="#addRoleModal"
class="role-edit-modal"
><span>Edit Role</span></a
>
</div>
<a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="card h-100">
<div class="row h-100">
<div class="col-sm-5">
<div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-4">
<img
src="{{ asset('assets/img/illustrations/add-new-roles.png') }}"
class="img-fluid"
alt="Image"
width="83" />
</div>
</div>
<div class="col-sm-7">
<div class="card-body text-sm-end text-center ps-sm-0">
<button
data-bs-target="#addRoleModal"
data-bs-toggle="modal"
class="btn btn-sm btn-primary mb-4 text-nowrap add-new-role">
Add New Role
</button>
<p class="mb-0">
Add new role, <br />
if it doesn't exist.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<h4 class="mt-6 mb-1">Total users with their roles</h4>
<p class="mb-0">Find all of your companys administrator accounts and their associate roles.</p>
</div>
<div class="col-12">
<!-- Role Table -->
<div class="card">
<div class="card-datatable">
<table class="datatables-users table border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>User</th>
<th>Role</th>
<th>Plan</th>
<th>Billing</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div>
</div>
<!--/ Role Table -->
</div>
</div>
<!--/ Role cards -->
<!-- Add Role Modal -->
<!-- Add Role Modal -->
<div class="modal fade" id="addRoleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="role-title">Add New Role</h4>
<p class="text-body-secondary">Set role permissions</p>
</div>
<!-- Add role form -->
<form id="addRoleForm" class="row g-3" onsubmit="return false">
<div class="col-12 form-control-validation mb-3">
<label class="form-label" for="modalRoleName">Role Name</label>
<input
type="text"
id="modalRoleName"
name="modalRoleName"
class="form-control"
placeholder="Enter a role name"
tabindex="-1" />
</div>
<div class="col-12">
<h5 class="mb-6">Role Permissions</h5>
<!-- Permission table -->
<div class="table-responsive">
<table class="table table-flush-spacing">
<tbody>
<tr>
<td class="text-nowrap fw-medium">
Administrator Access
<i
class="icon-base ti tabler-info-circle icon-xs"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Allows a full access to the system"></i>
</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="selectAll" />
<label class="form-check-label" for="selectAll"> Select All </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">User Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="userManagementRead" />
<label class="form-check-label" for="userManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="userManagementWrite" />
<label class="form-check-label" for="userManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="userManagementCreate" />
<label class="form-check-label" for="userManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Content Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="contentManagementRead" />
<label class="form-check-label" for="contentManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="contentManagementWrite" />
<label class="form-check-label" for="contentManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="contentManagementCreate" />
<label class="form-check-label" for="contentManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Disputes Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dispManagementRead" />
<label class="form-check-label" for="dispManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dispManagementWrite" />
<label class="form-check-label" for="dispManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="dispManagementCreate" />
<label class="form-check-label" for="dispManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Database Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dbManagementRead" />
<label class="form-check-label" for="dbManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dbManagementWrite" />
<label class="form-check-label" for="dbManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="dbManagementCreate" />
<label class="form-check-label" for="dbManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Financial Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="finManagementRead" />
<label class="form-check-label" for="finManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="finManagementWrite" />
<label class="form-check-label" for="finManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="finManagementCreate" />
<label class="form-check-label" for="finManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Reporting</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="reportingRead" />
<label class="form-check-label" for="reportingRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="reportingWrite" />
<label class="form-check-label" for="reportingWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="reportingCreate" />
<label class="form-check-label" for="reportingCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">API Control</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="apiRead" />
<label class="form-check-label" for="apiRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="apiWrite" />
<label class="form-check-label" for="apiWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="apiCreate" />
<label class="form-check-label" for="apiCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Repository Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="repoRead" />
<label class="form-check-label" for="repoRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="repoWrite" />
<label class="form-check-label" for="repoWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="repoCreate" />
<label class="form-check-label" for="repoCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Payroll</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="payrollRead" />
<label class="form-check-label" for="payrollRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="payrollWrite" />
<label class="form-check-label" for="payrollWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="payrollCreate" />
<label class="form-check-label" for="payrollCreate"> Create </label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Permission table -->
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-sm-4 me-1">Submit</button>
<button
type="reset"
class="btn btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close">
Cancel
</button>
</div>
</form>
<!--/ Add role form -->
</div>
</div>
</div>
</div>
<!--/ Add Role Modal -->
<!-- / Add Role Modal -->
</div>
@endsection