436 lines
15 KiB
Vue
436 lines
15 KiB
Vue
|
<script>
|
||
|
|
import Layout from "../../layouts/main";
|
||
|
|
import PageHeader from "../../components/page-header";
|
||
|
|
|
||
|
|
import { barChart } from "./data-overview";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Projects-overview component
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
components: { Layout, PageHeader },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
barChart: barChart,
|
||
|
|
title: "Projects Overview",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
text: "Projects",
|
||
|
|
href: "/"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Projects Overview",
|
||
|
|
active: true
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-8">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="media">
|
||
|
|
<img src="/images/companies/img-1.png" alt class="avatar-sm me-4" />
|
||
|
|
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="text-truncate font-size-15">Skote Dashboard UI</h5>
|
||
|
|
<p class="text-muted">Separate existence is a myth. For science, music, sport, etc.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h5 class="font-size-15 mt-4">Project Details :</h5>
|
||
|
|
|
||
|
|
<p
|
||
|
|
class="text-muted"
|
||
|
|
>To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc,</p>
|
||
|
|
|
||
|
|
<div class="text-muted mt-4">
|
||
|
|
<p>
|
||
|
|
<i class="mdi mdi-chevron-right text-primary me-1"></i> To achieve this, it would be necessary
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<i class="mdi mdi-chevron-right text-primary me-1"></i> Separate existence is a myth.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<i class="mdi mdi-chevron-right text-primary me-1"></i> If several languages coalesce
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row task-dates">
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
<i class="bx bx-calendar me-1 text-primary"></i> Start Date
|
||
|
|
</h5>
|
||
|
|
<p class="text-muted mb-0">08 Sept, 2019</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="mt-4">
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
<i class="bx bx-calendar-check me-1 text-primary"></i> Due Date
|
||
|
|
</h5>
|
||
|
|
<p class="text-muted mb-0">12 Oct, 2019</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Team Members</h4>
|
||
|
|
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-centered align-middle">
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td style="width: 50px;">
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-2.jpg"
|
||
|
|
class="rounded-circle avatar-xs"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14 m-0">
|
||
|
|
<a href class="text-dark">Daniel Canales</a>
|
||
|
|
</h5>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div>
|
||
|
|
<a
|
||
|
|
href="javascript: void(0);"
|
||
|
|
class="badge bg-primary bg-soft text-primary font-size-11"
|
||
|
|
>Frontend</a>
|
||
|
|
<a
|
||
|
|
href="javascript: void(0);"
|
||
|
|
class="badge bg-primary bg-soft text-primary font-size-11 ms-1"
|
||
|
|
>UI</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-1.jpg"
|
||
|
|
class="rounded-circle avatar-xs"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14 m-0">
|
||
|
|
<a href class="text-dark">Jennifer Walker</a>
|
||
|
|
</h5>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div>
|
||
|
|
<a
|
||
|
|
href="javascript: void(0);"
|
||
|
|
class="badge bg-primary bg-soft text-primary font-size-11"
|
||
|
|
>UI / UX</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<div class="avatar-xs">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-primary text-white font-size-16"
|
||
|
|
>C</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14 m-0">
|
||
|
|
<a href class="text-dark">Carl Mackay</a>
|
||
|
|
</h5>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div>
|
||
|
|
<a
|
||
|
|
href="javascript: void(0);"
|
||
|
|
class="badge bg-primary bg-soft text-primary font-size-11"
|
||
|
|
>Backend</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-4.jpg"
|
||
|
|
class="rounded-circle avatar-xs"
|
||
|
|
alt
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14 m-0">
|
||
|
|
<a href class="text-dark">Janice Cole</a>
|
||
|
|
</h5>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div>
|
||
|
|
<a
|
||
|
|
href="javascript: void(0);"
|
||
|
|
class="badge bg-primary bg-soft text-primary font-size-11"
|
||
|
|
>Frontend</a>
|
||
|
|
<a
|
||
|
|
href="javascript: void(0);"
|
||
|
|
class="badge bg-primary bg-soft text-primary font-size-11 ml-1"
|
||
|
|
>UI</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<div class="avatar-xs">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-primary text-white font-size-16"
|
||
|
|
>T</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14 m-0">
|
||
|
|
<a href class="text-dark">Tony Brafford</a>
|
||
|
|
</h5>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div>
|
||
|
|
<a
|
||
|
|
href="javascript: void(0);"
|
||
|
|
class="badge bg-primary bg-soft text-primary font-size-11"
|
||
|
|
>Backend</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Overview</h4>
|
||
|
|
|
||
|
|
<div id="overview-chart" class="apex-charts" dir="ltr"></div>
|
||
|
|
<apexchart
|
||
|
|
class="apex-charts"
|
||
|
|
type="bar"
|
||
|
|
height="280"
|
||
|
|
:series="barChart.series"
|
||
|
|
:options="barChart.chartOptions"
|
||
|
|
></apexchart>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Attached Files</h4>
|
||
|
|
<div class="table-responsive mb-0">
|
||
|
|
<table class="table table-nowrap table-centered table-hover mb-0">
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td style="width: 45px;">
|
||
|
|
<div class="avatar-sm">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-24"
|
||
|
|
>
|
||
|
|
<i class="bx bxs-file-doc"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14 mb-1">
|
||
|
|
<a href="javascript: void(0);" class="text-dark">Skote Landing.Zip</a>
|
||
|
|
</h5>
|
||
|
|
<small>Size : 3.25 MB</small>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="text-center">
|
||
|
|
<a href="javascript: void(0);" class="text-dark">
|
||
|
|
<i class="bx bx-download h3 m-0"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<div class="avatar-sm">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-24"
|
||
|
|
>
|
||
|
|
<i class="bx bxs-file-doc"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14 mb-1">
|
||
|
|
<a href="javascript: void(0);" class="text-dark">Skote Admin.Zip</a>
|
||
|
|
</h5>
|
||
|
|
<small>Size : 3.15 MB</small>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="text-center">
|
||
|
|
<a href="javascript: void(0);" class="text-dark">
|
||
|
|
<i class="bx bx-download h3 m-0"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<div class="avatar-sm">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-24"
|
||
|
|
>
|
||
|
|
<i class="bx bxs-file-doc"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14 mb-1">
|
||
|
|
<a href="javascript: void(0);" class="text-dark">Skote Logo.Zip</a>
|
||
|
|
</h5>
|
||
|
|
<small>Size : 2.02 MB</small>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="text-center">
|
||
|
|
<a href="javascript: void(0);" class="text-dark">
|
||
|
|
<i class="bx bx-download h3 m-0"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<div class="avatar-sm">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-24"
|
||
|
|
>
|
||
|
|
<i class="bx bxs-file-doc"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<h5 class="font-size-14">
|
||
|
|
<a href="javascript: void(0);" class="text-dark">Veltrix admin.Zip</a>
|
||
|
|
</h5>
|
||
|
|
<small>Size : 2.25 MB</small>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="text-center">
|
||
|
|
<a href="javascript: void(0);" class="text-dark">
|
||
|
|
<i class="bx bx-download h3 m-0"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Comments</h4>
|
||
|
|
|
||
|
|
<div class="media mb-4">
|
||
|
|
<div class="me-3">
|
||
|
|
<img
|
||
|
|
class="media-object rounded-circle avatar-xs"
|
||
|
|
alt
|
||
|
|
src="/images/users/avatar-2.jpg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-13 mb-1">David Lambert</h5>
|
||
|
|
<p class="text-muted mb-1">Separate existence is a myth.</p>
|
||
|
|
</div>
|
||
|
|
<div class="ml-3">
|
||
|
|
<a href class="text-primary">Reply</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media mb-4">
|
||
|
|
<div class="me-3">
|
||
|
|
<img
|
||
|
|
class="media-object rounded-circle avatar-xs"
|
||
|
|
alt
|
||
|
|
src="/images/users/avatar-3.jpg"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-13 mb-1">Steve Foster</h5>
|
||
|
|
<p class="text-muted mb-1">
|
||
|
|
<a href class="text-success">@Henry</a>
|
||
|
|
To an English person it will like simplified
|
||
|
|
</p>
|
||
|
|
<div class="media mt-3">
|
||
|
|
<div class="avatar-xs me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-16"
|
||
|
|
>J</span>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-13 mb-1">Jeffrey Walker</h5>
|
||
|
|
<p class="text-muted mb-1">as a skeptical Cambridge friend</p>
|
||
|
|
</div>
|
||
|
|
<div class="ml-3">
|
||
|
|
<a href class="text-primary">Reply</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ml-3">
|
||
|
|
<a href class="text-primary">Reply</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media mb-4">
|
||
|
|
<div class="avatar-xs me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary font-size-16"
|
||
|
|
>S</span>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-13 mb-1">Steven Carlson</h5>
|
||
|
|
<p class="text-muted mb-1">Separate existence is a myth.</p>
|
||
|
|
</div>
|
||
|
|
<div class="ml-3">
|
||
|
|
<a href class="text-primary">Reply</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-center mt-4 pt-2">
|
||
|
|
<a href="javascript: void(0);" class="btn btn-primary btn-sm">View more</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</Layout>
|
||
|
|
</template>
|