604 lines
38 KiB
PHP
604 lines
38 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'User')
|
|
|
|
@push('style')
|
|
<!-- CSS Libraries -->
|
|
<link rel="stylesheet"
|
|
href="{{ asset('library/bootstrap-social/bootstrap-social.css') }}">
|
|
<link rel="stylesheet"
|
|
href="{{ asset('library/owl.carousel/dist/assets/owl.theme.default.min.css') }}">
|
|
<link rel="stylesheet"
|
|
href="{{ asset('library/owl.carousel/dist/assets/owl.carousel.min.css') }}">
|
|
@endpush
|
|
|
|
@section('main')
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>User</h1>
|
|
<div class="section-header-breadcrumb">
|
|
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
|
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
|
<div class="breadcrumb-item">User</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<h2 class="section-title">Users</h2>
|
|
<p class="section-lead">Components relating to users, lists of users and so on.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-lg-7">
|
|
<div class="card author-box card-primary">
|
|
<div class="card-body">
|
|
<div class="author-box-left">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
class="rounded-circle author-box-picture">
|
|
<div class="clearfix"></div>
|
|
<a href="#"
|
|
class="btn btn-primary follow-btn mt-3"
|
|
data-follow-action="alert('follow clicked');"
|
|
data-unfollow-action="alert('unfollow clicked');">Follow</a>
|
|
</div>
|
|
<div class="author-box-details">
|
|
<div class="author-box-name">
|
|
<a href="#">Hasan Basri</a>
|
|
</div>
|
|
<div class="author-box-job">Web Developer</div>
|
|
<div class="author-box-description">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat.</p>
|
|
</div>
|
|
<div class="mb-2 mt-3">
|
|
<div class="text-small font-weight-bold">Follow Hasan On</div>
|
|
</div>
|
|
<a href="#"
|
|
class="btn btn-social-icon btn-facebook mr-1">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="btn btn-social-icon btn-twitter mr-1">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="btn btn-social-icon btn-github mr-1">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="btn btn-social-icon btn-instagram mr-1">
|
|
<i class="fab fa-instagram"></i>
|
|
</a>
|
|
<div class="w-100 d-sm-none"></div>
|
|
<div class="mt-sm-0 float-right mt-3">
|
|
<a href="#"
|
|
class="btn">View Posts <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card card-danger">
|
|
<div class="card-header">
|
|
<h4>Users</h4>
|
|
<div class="card-header-action">
|
|
<a href="#"
|
|
class="btn btn-danger btn-icon icon-right">View All <i
|
|
class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="owl-carousel owl-theme"
|
|
id="users-carousel">
|
|
<div>
|
|
<div class="user-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
class="img-fluid">
|
|
<div class="user-details">
|
|
<div class="user-name">Hasan Basri</div>
|
|
<div class="text-job text-muted">Web Developer</div>
|
|
<div class="user-cta">
|
|
<button class="btn btn-primary follow-btn"
|
|
data-follow-action="alert('user1 followed');"
|
|
data-unfollow-action="alert('user1 unfollowed');">Follow</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="user-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-2.png') }}"
|
|
class="img-fluid">
|
|
<div class="user-details">
|
|
<div class="user-name">Kusnaedi</div>
|
|
<div class="text-job text-muted">Mobile Developer</div>
|
|
<div class="user-cta">
|
|
<button class="btn btn-primary follow-btn"
|
|
data-follow-action="alert('user2 followed');"
|
|
data-unfollow-action="alert('user2 unfollowed');">Follow</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="user-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-3.png') }}"
|
|
class="img-fluid">
|
|
<div class="user-details">
|
|
<div class="user-name">Bagus Dwi Cahya</div>
|
|
<div class="text-job text-muted">UI Designer</div>
|
|
<div class="user-cta">
|
|
<button class="btn btn-danger following-btn"
|
|
data-unfollow-action="alert('user3 unfollowed');"
|
|
data-follow-action="alert('user3 followed');">Following</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="user-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-4.png') }}"
|
|
class="img-fluid">
|
|
<div class="user-details">
|
|
<div class="user-name">Wildan Ahdian</div>
|
|
<div class="text-job text-muted">Project Manager</div>
|
|
<div class="user-cta">
|
|
<button class="btn btn-primary follow-btn"
|
|
data-follow-action="alert('user4 followed');"
|
|
data-unfollow-action="alert('user4 unfollowed');">Follow</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="user-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-5.png') }}"
|
|
class="img-fluid">
|
|
<div class="user-details">
|
|
<div class="user-name">Deden Febriansyah</div>
|
|
<div class="text-job text-muted">IT Support</div>
|
|
<div class="user-cta">
|
|
<button class="btn btn-primary follow-btn"
|
|
data-follow-action="alert('user5 followed');"
|
|
data-unfollow-action="alert('user5 unfollowed');">Follow</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-lg-5">
|
|
<div class="card profile-widget">
|
|
<div class="profile-widget-header">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
class="rounded-circle profile-widget-picture">
|
|
<div class="profile-widget-items">
|
|
<div class="profile-widget-item">
|
|
<div class="profile-widget-item-label">Posts</div>
|
|
<div class="profile-widget-item-value">187</div>
|
|
</div>
|
|
<div class="profile-widget-item">
|
|
<div class="profile-widget-item-label">Followers</div>
|
|
<div class="profile-widget-item-value">6,8K</div>
|
|
</div>
|
|
<div class="profile-widget-item">
|
|
<div class="profile-widget-item-label">Following</div>
|
|
<div class="profile-widget-item-value">2,1K</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="profile-widget-description pb-0">
|
|
<div class="profile-widget-name">Hasan Basri <div
|
|
class="text-muted d-inline font-weight-normal">
|
|
<div class="slash"></div> Web Developer
|
|
</div>
|
|
</div>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat.</p>
|
|
</div>
|
|
<div class="card-footer pt-0 text-center">
|
|
<div class="font-weight-bold text-small mb-2">Follow Hasan On</div>
|
|
<a href="#"
|
|
class="btn btn-social-icon btn-facebook mr-1">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="btn btn-social-icon btn-twitter mr-1">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="btn btn-social-icon btn-github mr-1">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="btn btn-social-icon btn-instagram mr-1">
|
|
<i class="fab fa-instagram"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h4>Authors</h4>
|
|
</div>
|
|
<div class="card-body pb-0">
|
|
<div class="row">
|
|
<div class="col-6 col-sm-3 col-lg-3 mb-md-0 mb-4">
|
|
<div class="avatar-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
class="img-fluid"
|
|
data-toggle="tooltip"
|
|
title="Syahdan Ubaidillah">
|
|
<div class="avatar-badge"
|
|
title="Editor"
|
|
data-toggle="tooltip"><i class="fas fa-wrench"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3 col-lg-3 mb-md-0 mb-4">
|
|
<div class="avatar-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-2.png') }}"
|
|
class="img-fluid"
|
|
data-toggle="tooltip"
|
|
title="Danny Stenvenson">
|
|
<div class="avatar-badge"
|
|
title="Admin"
|
|
data-toggle="tooltip"><i class="fas fa-cog"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3 col-lg-3 mb-md-0 mb-4">
|
|
<div class="avatar-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-3.png') }}"
|
|
class="img-fluid"
|
|
data-toggle="tooltip"
|
|
title="Riko Huang">
|
|
<div class="avatar-badge"
|
|
title="Author"
|
|
data-toggle="tooltip"><i class="fas fa-pencil-alt"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3 col-lg-3 mb-md-0 mb-4">
|
|
<div class="avatar-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-4.png') }}"
|
|
class="img-fluid"
|
|
data-toggle="tooltip"
|
|
title="Luthfi Hakim">
|
|
<div class="avatar-badge"
|
|
title="Author"
|
|
data-toggle="tooltip"><i class="fas fa-pencil-alt"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 col-sm-3 col-lg-3 mb-md-0 mb-4">
|
|
<div class="avatar-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-5.png') }}"
|
|
class="img-fluid"
|
|
data-toggle="tooltip"
|
|
title="Alfa Zulkarnain">
|
|
<div class="avatar-badge"
|
|
title="Editor"
|
|
data-toggle="tooltip"><i class="fas fa-wrench"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3 col-lg-3 mb-md-0 mb-4">
|
|
<div class="avatar-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-4.png') }}"
|
|
class="img-fluid"
|
|
data-toggle="tooltip"
|
|
title="Egi Ferdian">
|
|
<div class="avatar-badge"
|
|
title="Admin"
|
|
data-toggle="tooltip"><i class="fas fa-cog"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3 col-lg-3 mb-md-0 mb-4">
|
|
<div class="avatar-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
class="img-fluid"
|
|
data-toggle="tooltip"
|
|
title="Jaka Ramadhan">
|
|
<div class="avatar-badge"
|
|
title="Author"
|
|
data-toggle="tooltip"><i class="fas fa-pencil-alt"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-sm-3 col-lg-3 mb-md-0 mb-4">
|
|
<div class="avatar-item">
|
|
<img alt="image"
|
|
src="{{ asset('img/avatar/avatar-2.png') }}"
|
|
class="img-fluid"
|
|
data-toggle="tooltip"
|
|
title="Ryan">
|
|
<div class="avatar-badge"
|
|
title="Admin"
|
|
data-toggle="tooltip"><i class="fas fa-cog"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Comments</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled list-unstyled-border list-unstyled-noborder">
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="70"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-right">
|
|
<div class="text-primary">Approved</div>
|
|
</div>
|
|
<div class="media-title mb-1">Rizal Fakhri</div>
|
|
<div class="text-time">Yesterday</div>
|
|
<div class="media-description text-muted">Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non
|
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
<div class="media-links">
|
|
<a href="#">View</a>
|
|
<div class="bullet"></div>
|
|
<a href="#">Edit</a>
|
|
<div class="bullet"></div>
|
|
<a href="#"
|
|
class="text-danger">Trash</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="70"
|
|
src="{{ asset('img/avatar/avatar-2.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-right">
|
|
<div class="text-warning">Pending</div>
|
|
</div>
|
|
<div class="media-title mb-1">Bambang Uciha</div>
|
|
<div class="text-time">Yesterday</div>
|
|
<div class="media-description text-muted">Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non
|
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
<div class="media-links">
|
|
<a href="#">View</a>
|
|
<div class="bullet"></div>
|
|
<a href="#">Edit</a>
|
|
<div class="bullet"></div>
|
|
<a href="#"
|
|
class="text-danger">Trash</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="70"
|
|
src="{{ asset('img/avatar/avatar-3.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-right">
|
|
<div class="text-primary">Approved</div>
|
|
</div>
|
|
<div class="media-title mb-1">Ujang Maman</div>
|
|
<div class="text-time">Yesterday</div>
|
|
<div class="media-description text-muted">Duis aute irure dolor in
|
|
reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
non
|
|
proident</div>
|
|
<div class="media-links">
|
|
<a href="#">View</a>
|
|
<div class="bullet"></div>
|
|
<a href="#">Edit</a>
|
|
<div class="bullet"></div>
|
|
<a href="#"
|
|
class="text-danger">Trash</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>User Progress</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled user-progress list-unstyled-border list-unstyled-noborder">
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="50"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-title">Rizal Fakhri</div>
|
|
<div class="text-job text-muted">Web Developer</div>
|
|
</div>
|
|
<div class="media-progressbar">
|
|
<div class="progress-text">30%</div>
|
|
<div class="progress"
|
|
data-height="6">
|
|
<div class="progress-bar bg-primary"
|
|
data-width="30%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="media-cta">
|
|
<a href="#"
|
|
class="btn btn-outline-primary">Detail</a>
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="50"
|
|
src="{{ asset('img/avatar/avatar-5.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-title">Irwansyah Saputra</div>
|
|
<div class="text-job text-muted">Web Developer</div>
|
|
</div>
|
|
<div class="media-progressbar">
|
|
<div class="progress-text">67%</div>
|
|
<div class="progress"
|
|
data-height="6">
|
|
<div class="progress-bar bg-primary"
|
|
data-width="67%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="media-cta">
|
|
<a href="#"
|
|
class="btn btn-outline-primary">Detail</a>
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="50"
|
|
src="{{ asset('img/avatar/avatar-4.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-title">Hasan Basri</div>
|
|
<div class="text-job text-muted">Web Developer</div>
|
|
</div>
|
|
<div class="media-progressbar">
|
|
<div class="progress-text">45%</div>
|
|
<div class="progress"
|
|
data-height="6">
|
|
<div class="progress-bar bg-primary"
|
|
data-width="45%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="media-cta">
|
|
<a href="#"
|
|
class="btn btn-outline-primary">Detail</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h4>User Details</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled user-details list-unstyled-border list-unstyled-noborder">
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="50"
|
|
src="{{ asset('img/avatar/avatar-1.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-title">Rizal Fakhri</div>
|
|
<div class="text-job text-muted">Web Developer</div>
|
|
</div>
|
|
<div class="media-items">
|
|
<div class="media-item">
|
|
<div class="media-value">1,239</div>
|
|
<div class="media-label">Posts</div>
|
|
</div>
|
|
<div class="media-item">
|
|
<div class="media-value">10K</div>
|
|
<div class="media-label">Followers</div>
|
|
</div>
|
|
<div class="media-item">
|
|
<div class="media-value">2,312</div>
|
|
<div class="media-label">Following</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="50"
|
|
src="{{ asset('img/avatar/avatar-5.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-title">Irwansyah Saputra</div>
|
|
<div class="text-job text-muted">Web Developer</div>
|
|
</div>
|
|
<div class="media-items">
|
|
<div class="media-item">
|
|
<div class="media-value">4,872</div>
|
|
<div class="media-label">Posts</div>
|
|
</div>
|
|
<div class="media-item">
|
|
<div class="media-value">43K</div>
|
|
<div class="media-label">Followers</div>
|
|
</div>
|
|
<div class="media-item">
|
|
<div class="media-value">1,290</div>
|
|
<div class="media-label">Following</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="media">
|
|
<img alt="image"
|
|
class="rounded-circle mr-3"
|
|
width="50"
|
|
src="{{ asset('img/avatar/avatar-4.png') }}">
|
|
<div class="media-body">
|
|
<div class="media-title">Hasan Basri</div>
|
|
<div class="text-job text-muted">Web Developer</div>
|
|
</div>
|
|
<div class="media-items">
|
|
<div class="media-item">
|
|
<div class="media-value">1,821</div>
|
|
<div class="media-label">Posts</div>
|
|
</div>
|
|
<div class="media-item">
|
|
<div class="media-value">14K</div>
|
|
<div class="media-label">Followers</div>
|
|
</div>
|
|
<div class="media-item">
|
|
<div class="media-value">2,891</div>
|
|
<div class="media-label">Following</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<!-- JS Libraies -->
|
|
<script src="{{ asset('library/owl.carousel/dist/owl.carousel.min.js') }}"></script>
|
|
|
|
<!-- Page Specific JS File -->
|
|
<script src="{{ asset('js/page/components-user.js') }}"></script>
|
|
@endpush
|