diff --git a/src/redux/reducers/rootReducer.js b/src/redux/reducers/rootReducer.js index d354fbe..f275ea7 100644 --- a/src/redux/reducers/rootReducer.js +++ b/src/redux/reducers/rootReducer.js @@ -7,7 +7,7 @@ import navbar from './navbar' import layout from './layout' import todo from '@src/views/apps/todo/store/reducer' import users from '@src/views/apps/user/store/reducer' -import dataTables from '@src/views/tables/data-tables/store/reducer' + import account from '../../views/apps/company/store/reducer' const rootReducer = combineReducers({ @@ -16,7 +16,6 @@ const rootReducer = combineReducers({ users, navbar, layout, - dataTables, account }) diff --git a/src/views/apps/account/AccountView.js b/src/views/apps/account/AccountView.js index 66a680e..a287765 100644 --- a/src/views/apps/account/AccountView.js +++ b/src/views/apps/account/AccountView.js @@ -4,12 +4,8 @@ import Avatar from '@components/avatar' import Timeline from './timeline' import AvatarGroup from '@components/avatar-group' import jsonImg from '@src/assets/images/icons/json.png' -import InvoiceList from '@src/views/apps/invoice/list' import ceo from '@src/assets/images/portrait/small/avatar-s-9.jpg' import { ThemeColors } from '@src/utility/context/ThemeColors' -import Sales from '@src/views/ui-elements/cards/analytics/Sales' -import AvgSessions from '@src/views/ui-elements/cards/analytics/AvgSessions' -import CardAppDesign from '@src/views/ui-elements/cards/advance/CardAppDesign' import Contacts from './Contacts' import Tasks from './Tasks' import Notes from './Notes' @@ -17,7 +13,6 @@ import TaskSidebar from './TaskSidebar' import ContactSidebar from './ContactSidebar' import ActivitySidebar from '../activityTree/ActivitySidebar' import ActivityTree from '../activityTree/ActivityTree' -import SupportTracker from '@src/views/ui-elements/cards/analytics/SupportTracker' import { Row, Col, @@ -26,8 +21,6 @@ import { CardHeader, CardTitle, CardBody, - InputGroup, - CustomInput, DropdownMenu, DropdownItem, InputGroupText, @@ -36,9 +29,6 @@ import { UncontrolledDropdown } from 'reactstrap' import { List, Menu, Search, MoreVertical } from 'react-feather' -import OrdersReceived from '@src/views/ui-elements/cards/statistics/OrdersReceived' -import CardCongratulations from '@src/views/ui-elements/cards/advance/CardCongratulations' -import SubscribersGained from '@src/views/ui-elements/cards/statistics/SubscribersGained' import { useDispatch, useSelector } from 'react-redux' import '@styles/react/libs/charts/apex-charts.scss' diff --git a/src/views/apps/company/view/index.js b/src/views/apps/company/view/index.js index 74ee70a..a92b3a6 100644 --- a/src/views/apps/company/view/index.js +++ b/src/views/apps/company/view/index.js @@ -13,7 +13,6 @@ import { Row, Col, Alert } from 'reactstrap' import PlanCard from './PlanCard' import UserInfoCard from './UserInfoCard' import UserTimeline from './UserTimeline' -import InvoiceList from '../../invoice/list' import PermissionsTable from './PermissionsTable' // ** Styles @@ -48,11 +47,6 @@ const UserView = props => { - - - - - ) : ( diff --git a/src/views/apps/invoice/add/AddActions.js b/src/views/apps/invoice/add/AddActions.js deleted file mode 100644 index 8b63afc..0000000 --- a/src/views/apps/invoice/add/AddActions.js +++ /dev/null @@ -1,60 +0,0 @@ -// ** React Imports -import { Fragment } from 'react' -import { Link } from 'react-router-dom' - -// ** Third Party Components -import { Card, CardBody, Button, Input, CustomInput, Label } from 'reactstrap' - -const AddActions = () => { - return ( - - - - - Send Invoice - - - Preview - - - Save - - - -
-
-

Accept payments via

- - - - - - - -
-
-
- - -
-
- - -
-
- - -
-
-
- - ) -} - -export default AddActions diff --git a/src/views/apps/invoice/add/AddCard.js b/src/views/apps/invoice/add/AddCard.js deleted file mode 100644 index effa195..0000000 --- a/src/views/apps/invoice/add/AddCard.js +++ /dev/null @@ -1,477 +0,0 @@ -// ** React Imports -import { Fragment, useState, useEffect } from 'react' - -// ** Custom Components -import Sidebar from '@components/sidebar' -import Repeater from '@components/repeater' - -// ** Third Party Components -import axios from 'axios' -import Flatpickr from 'react-flatpickr' -import { SlideDown } from 'react-slidedown' -import { X, Plus, Hash } from 'react-feather' -import Select, { components } from 'react-select' -import { selectThemeColors } from '@utils' -import { - Card, - CardBody, - CardText, - Row, - Col, - Form, - Input, - InputGroup, - InputGroupAddon, - InputGroupText, - FormGroup, - Label, - Button, - UncontrolledTooltip -} from 'reactstrap' - -// ** Styles -import 'react-slidedown/lib/slidedown.css' -import '@styles/react/libs/react-select/_react-select.scss' -import '@styles/react/libs/flatpickr/flatpickr.scss' -import '@styles/base/pages/app-invoice.scss' - -const AddCard = () => { - // ** States - const [count, setCount] = useState(1) - const [value, setValue] = useState({}) - const [open, setOpen] = useState(false) - const [clients, setClients] = useState(null) - const [selected, setSelected] = useState(null) - const [picker, setPicker] = useState(new Date()) - const [invoiceNumber, setInvoiceNumber] = useState(false) - const [dueDatepicker, setDueDatePicker] = useState(new Date()) - const [options, setOptions] = useState([ - { - value: 'add-new', - label: 'Add New Customer', - type: 'button', - color: 'flat-success' - } - ]) - - useEffect(() => { - // ** Get Clients - axios.get('/api/invoice/clients').then(response => { - const arr = options - response.data.map(item => arr.push({ value: item.name, label: item.name })) - setOptions([...arr]) - setClients(response.data) - }) - - // ** Get Invoices & Set Invoice Number - axios - .get('/apps/invoice/invoices', { - page: 1, - perPage: 10, - status: '', - q: '' - }) - .then(response => { - const lastInvoiceNumber = Math.max.apply( - Math, - response.data.allData.map(i => i.id) - ) - setInvoiceNumber(lastInvoiceNumber + 1) - }) - }, []) - - // ** Deletes form - const deleteForm = e => { - e.preventDefault() - e.target.closest('.repeater-wrapper').remove() - } - - // ** Function to toggle sidebar - const toggleSidebar = () => setOpen(!open) - - // ** Vars - const countryOptions = [ - { value: 'australia', label: 'Australia' }, - { value: 'canada', label: 'Canada' }, - { value: 'russia', label: 'Russia' }, - { value: 'saudi-arabia', label: 'Saudi Arabia' }, - { value: 'singapore', label: 'Singapore' }, - { value: 'sweden', label: 'Sweden' }, - { value: 'switzerland', label: 'Switzerland' }, - { value: 'united-kingdom', label: 'United Kingdom' }, - { value: 'united-arab-emirates', label: 'United Arab Emirates' }, - { value: 'united-states-of-america', label: 'United States of America' } - ] - - // ** Custom Options Component - const OptionComponent = ({ data, ...props }) => { - if (data.type === 'button') { - return ( - - ) - } else { - return {data.label} - } - } - - // ** Invoice To OnChange - const handleInvoiceToChange = data => { - setValue(data) - setSelected(clients.filter(i => i.name === data.value)[0]) - } - - const note = - 'It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance projects. Thank You!' - - return ( - - - {/* Header */} - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - -

-
-

Office 149, 450 South Brand Brooklyn

-

San Diego County, CA 91905, USA

-

+1 (123) 456 7891, +44 (876) 543 2198

-
-
-
-

Invoice

- - - - - - - - -
-
- Date: - setPicker(date)} - className='form-control invoice-edit-input date-picker' - /> -
-
- Due Date: - setDueDatePicker(date)} - className='form-control invoice-edit-input due-date-picker' - /> -
-
-
- - {/* /Header */} - -
- - {/* Address and Contact */} - - - -
Invoice To:
-
- {clients !== null ? ( - - - - - - - - - - - Cost - -
- Discount: 0% - - 0% - - - 0% - - Tax 1 - Tax 2 -
- - - Qty - - - - Price - $24.00 - - -
- -
- - - - ) - }} - - - - setCount(count + 1)}> - - Add Item - - - - - - {/* /Product Details */} - - {/* Invoice Total */} - - - -
- - -
- - -
-
-

Subtotal:

-

$1800

-
-
-

Discount:

-

$28

-
-
-

Tax:

-

21%

-
-
-
-

Total:

-

$1690

-
-
- - - - {/* /Invoice Total */} - -
- - {/* Invoice Note */} - - - - - - - - - - - {/* /Invoice Note */} - - - -
- - - - - - - - - - - - - - - - - - - - -
- - - ) -} - -export default AddCard diff --git a/src/views/apps/invoice/add/index.js b/src/views/apps/invoice/add/index.js deleted file mode 100644 index a034cc0..0000000 --- a/src/views/apps/invoice/add/index.js +++ /dev/null @@ -1,27 +0,0 @@ -// ** Invoice Add Components -import AddCard from './AddCard' -import AddActions from './AddActions' - -// ** Third Party Components -import { Row, Col } from 'reactstrap' - -// ** Styles -import '@styles/react/libs/flatpickr/flatpickr.scss' -import '@styles/base/pages/app-invoice.scss' - -const InvoiceAdd = () => { - return ( -
- - - - - - - - -
- ) -} - -export default InvoiceAdd diff --git a/src/views/apps/invoice/edit/EditActions.js b/src/views/apps/invoice/edit/EditActions.js deleted file mode 100644 index bd23bdc..0000000 --- a/src/views/apps/invoice/edit/EditActions.js +++ /dev/null @@ -1,63 +0,0 @@ -// ** React Imports -import { Fragment } from 'react' -import { Link } from 'react-router-dom' - -// ** Third Party Components -import { Card, CardBody, Button, Input, CustomInput, Label } from 'reactstrap' - -const EditActions = ({ setSendSidebarOpen, setAddPaymentOpen }) => { - return ( - - - - setSendSidebarOpen(true)}> - Send Invoice - - - Preview - - - Save - - setAddPaymentOpen(true)}> - Add Payment - - - -
-
-

Accept payments via

- - - - - - - -
-
-
- - -
-
- - -
-
- - -
-
-
- - ) -} - -export default EditActions diff --git a/src/views/apps/invoice/edit/EditCard.js b/src/views/apps/invoice/edit/EditCard.js deleted file mode 100644 index bbac845..0000000 --- a/src/views/apps/invoice/edit/EditCard.js +++ /dev/null @@ -1,313 +0,0 @@ -// ** React Imports -import { useState } from 'react' - -// ** Third Party Components -import { - Card, - CardBody, - CardText, - Row, - Col, - Input, - InputGroup, - InputGroupAddon, - InputGroupText, - UncontrolledTooltip, - FormGroup, - Label, - Button -} from 'reactstrap' -import Flatpickr from 'react-flatpickr' -import Repeater from '@components/repeater' -import { SlideDown } from 'react-slidedown' -import { X, Plus, Hash } from 'react-feather' - -// ** Styles -import 'react-slidedown/lib/slidedown.css' -import '@styles/react/libs/flatpickr/flatpickr.scss' -import '@styles/base/pages/app-invoice.scss' - -const InvoiceEditCard = ({ data }) => { - // ** States - const [count, setCount] = useState(1) - const [picker, setPicker] = useState(new Date(data.invoice.issuedDate)) - const [dueDatepicker, setDueDatePicker] = useState(new Date(data.invoice.dueDate)) - - // ** Deletes form - const deleteForm = e => { - e.preventDefault() - e.target.closest('.repeater-wrapper').remove() - } - - const note = - 'It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance projects. Thank You!' - - return ( - - {/* Header */} - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - -

-
-

Office 149, 450 South Brand Brooklyn

-

San Diego County, CA 91905, USA

-

+1 (123) 456 7891, +44 (876) 543 2198

-
-
-
-

Invoice

- - - - - - - - -
-
- Date: - setPicker(date)} - className='form-control invoice-edit-input date-picker' - /> -
-
- Due Date: - setDueDatePicker(date)} - className='form-control invoice-edit-input due-date-picker' - /> -
-
-
- - {/* /Header */} - -
- - {/* Address and Contact */} - - - -
Invoice To:
-
{data.invoice.client.name}
- {data.invoice.client.company} - {data.invoice.client.address} - {data.invoice.client.contact} - {data.invoice.client.companyEmail} - - -
Payment Details:
- - - - - - - - - - - - - - - - - - - - - - - -
Total Due: - {data.paymentDetails.totalDue} -
Bank name:{data.paymentDetails.bankName}
Country:{data.paymentDetails.country}
IBAN:{data.paymentDetails.iban}
SWIFT code:{data.paymentDetails.swiftCode}
- - - - {/* /Address and Contact */} - - {/* Product Details */} - - - {i => { - const Tag = i === 0 ? 'div' : SlideDown - return ( - - - - - - Item - - - - - - - - - - Cost - -
- Discount: 0% - - 0% - - - 0% - - Tax 1 - Tax 2 -
- - - Qty - - - - Price - $24.00 - - -
- -
- - - - ) - }} - - - - - setCount(count + 1)}> - - Add Item - - - - - {/* /Product Details */} - - {/* Invoice Total */} - - - -
- - -
- - -
-
-

Subtotal:

-

$1800

-
-
-

Discount:

-

$28

-
-
-

Tax:

-

21%

-
-
-
-

Total:

-

$1690

-
-
- - - - {/* /Invoice Total */} - -
- - {/* Invoice Note */} - - - - - - - - - - - {/* /Invoice Note */} - - ) -} - -export default InvoiceEditCard diff --git a/src/views/apps/invoice/edit/index.js b/src/views/apps/invoice/edit/index.js deleted file mode 100644 index 35f4a8b..0000000 --- a/src/views/apps/invoice/edit/index.js +++ /dev/null @@ -1,58 +0,0 @@ -// ** React Imports -import { useEffect, useState } from 'react' -import { useParams, Link } from 'react-router-dom' - -// ** Third Party Components -import axios from 'axios' -import { Alert, Row, Col } from 'reactstrap' - -// ** Invoice Edit Components -import EditCard from './EditCard' -import EditActions from './EditActions' -import SendInvoiceSidebar from '../shared-sidebar/SidebarSendInvoice' -import AddPaymentSidebar from '../shared-sidebar/SidebarAddPayment' - -const InvoiceEdit = () => { - // ** Vars - const { id } = useParams() - - // ** States - const [data, setData] = useState(null) - const [sendSidebarOpen, setSendSidebarOpen] = useState(false) - const [addPaymentOpen, setAddPaymentOpen] = useState(false) - - // ** Functions to toggle add & send sidebar - const toggleSendSidebar = () => setSendSidebarOpen(!sendSidebarOpen) - const toggleAddSidebar = () => setAddPaymentOpen(!addPaymentOpen) - - // ** Get invoice on mount based on id - useEffect(() => { - axios.get(`/api/invoice/invoices/${id}`).then(response => { - setData(response.data) - }) - }, []) - - return data !== null && data.invoice !== undefined ? ( -
- - - - - - - - - - -
- ) : ( - -

Invoice not found

-
- Invoice with id: {id} doesn't exist. Check list of all invoices: Invoice List -
- - ) -} - -export default InvoiceEdit diff --git a/src/views/apps/invoice/list/SearchFilter.js b/src/views/apps/invoice/list/SearchFilter.js deleted file mode 100644 index d910f00..0000000 --- a/src/views/apps/invoice/list/SearchFilter.js +++ /dev/null @@ -1,172 +0,0 @@ -// ** React Imports -import { useState, useEffect } from 'react' -import { Link } from 'react-router-dom' - -// ** Table Columns -import { columns } from './columns' - -// ** Third Party Components -import ReactPaginate from 'react-paginate' -import { ChevronDown } from 'react-feather' -import DataTable from 'react-data-table-component' -import { Button, Label, Input, CustomInput, Row, Col, Card } from 'reactstrap' - -// ** Store & Actions -import { getData } from '../store/actions' -import { useDispatch, useSelector } from 'react-redux' - -// ** Styles -import '@styles/react/apps/app-invoice.scss' -import '@styles/react/libs/tables/react-dataTable-component.scss' - -const CustomHeader = ({ handleFilter, value, handleStatusValue, statusValue, handlePerPage, rowsPerPage }) => { - return ( -
- - -

Search Filter

- - - - - - - - - - -
- ) -} - -const SearchFilter = () => { - const dispatch = useDispatch() - const store = useSelector(state => state.invoice) - - const [value, setValue] = useState('') - const [currentPage, setCurrentPage] = useState(1) - const [statusValue, setStatusValue] = useState('') - const [rowsPerPage, setRowsPerPage] = useState(10) - - useEffect(() => { - dispatch( - getData({ - page: currentPage, - perPage: rowsPerPage, - status: statusValue, - q: value - }) - ) - }, [dispatch, store.data.length]) - - const handleFilter = val => { - setValue(val) - dispatch( - getData({ - page: currentPage, - perPage: rowsPerPage, - status: statusValue, - q: val - }) - ) - } - - const handlePerPage = e => { - dispatch( - getData({ - page: currentPage, - perPage: parseInt(e.target.value), - status: statusValue, - q: value - }) - ) - setRowsPerPage(parseInt(e.target.value)) - } - - const handleStatusValue = e => { - setStatusValue(e.target.value) - dispatch( - getData({ - page: currentPage, - perPage: rowsPerPage, - status: e.target.value, - q: value - }) - ) - } - - const handlePagination = page => { - dispatch( - getData({ - page: page.selected + 1, - perPage: rowsPerPage, - status: statusValue, - q: value - }) - ) - setCurrentPage(page.selected + 1) - } - - const CustomPagination = () => { - const count = Number((store.total / rowsPerPage).toFixed(0)) - - return ( - handlePagination(page)} - pageClassName={'page-item'} - nextLinkClassName={'page-link'} - nextClassName={'page-item next'} - previousClassName={'page-item prev'} - previousLinkClassName={'page-link'} - pageLinkClassName={'page-link'} - containerClassName={'pagination react-paginate justify-content-end p-1'} - /> - ) - } - - const dataToRender = () => { - const filters = { - status: statusValue, - q: value - } - - const isFiltered = Object.keys(filters).some(function (k) { - return filters[k].length > 0 - }) - - if (store.data.length > 0) { - return store.data - } else if (store.data.length === 0 && isFiltered) { - return [] - } else { - return store.allData.slice(0, rowsPerPage) - } - } - - return ( -
- -
- -
- -
- ) -} - -export default SearchFilter diff --git a/src/views/apps/invoice/list/Sidebar.js b/src/views/apps/invoice/list/Sidebar.js deleted file mode 100644 index 7188d91..0000000 --- a/src/views/apps/invoice/list/Sidebar.js +++ /dev/null @@ -1,158 +0,0 @@ -// ** React Import -import { useState } from 'react' - -// ** Custom Components -import Sidebar from '@components/sidebar' - -// ** Utils -import { isObjEmpty } from '@utils' - -// ** Third Party Components -import classnames from 'classnames' -import { useForm } from 'react-hook-form' -import { Button, FormGroup, Label, FormText, Form, Input } from 'reactstrap' - -// ** Store & Actions -// import { addUser } from '../store/action' -import { useDispatch } from 'react-redux' - -const SidebarNewUsers = ({ open, toggleSidebar }) => { - // ** States - const [role, setRole] = useState('subscriber') - const [plan, setPlan] = useState('basic') - - // ** Store Vars - const dispatch = useDispatch() - - // ** Vars - // const { register, errors, handleSubmit } = useForm() - - // ** Function to handle form submit - const onSubmit = values => { - if (isObjEmpty(errors)) { - toggleSidebar() - dispatch( - addUser({ - fullName: values['full-name'], - company: values.company, - role, - username: values.username, - country: values.country, - contact: values.contact, - email: values.email, - currentPlan: plan, - status: 'active', - avatar: '' - }) - ) - } - } - - return ( - -
- - - - - - - - - - - - You can use letters, numbers & periods - - - - - - - - - - - - - - - - setRole(e.target.value)}> - - - - - - - - setPlan(e.target.value)}> - - - - - - - - - - -
- - ) -} - -export default SidebarNewUsers diff --git a/src/views/apps/invoice/list/columns.js b/src/views/apps/invoice/list/columns.js deleted file mode 100644 index 317599d..0000000 --- a/src/views/apps/invoice/list/columns.js +++ /dev/null @@ -1,190 +0,0 @@ -// ** React Imports -import { Fragment } from 'react' - -import { Link } from 'react-router-dom' - -// ** Custom Components -import Avatar from '@components/avatar' - -// ** Store & Actions -import { deleteInvoice } from '../store/actions' -import { store } from '@store/storeConfig/store' - -// ** Third Party Components -import { - Badge, - UncontrolledDropdown, - DropdownMenu, - DropdownToggle, - DropdownItem, - UncontrolledTooltip -} from 'reactstrap' -import { - Eye, - TrendingUp, - Send, - MoreVertical, - Download, - Edit, - Trash, - Copy, - CheckCircle, - Save, - ArrowDownCircle, - Info, - PieChart -} from 'react-feather' - -// ** Vars -const invoiceStatusObj = { - Sent: { color: 'light-secondary', icon: Send }, - Paid: { color: 'light-success', icon: CheckCircle }, - Draft: { color: 'light-primary', icon: Save }, - Downloaded: { color: 'light-info', icon: ArrowDownCircle }, - 'Past Due': { color: 'light-danger', icon: Info }, - 'Partial Payment': { color: 'light-warning', icon: PieChart } -} - -// ** renders client column -const renderClient = row => { - const stateNum = Math.floor(Math.random() * 6), - states = ['light-success', 'light-danger', 'light-warning', 'light-info', 'light-primary', 'light-secondary'], - color = states[stateNum] - - if (row.avatar.length) { - return - } else { - return - } -} - -// ** Table columns -export const columns = [ - { - name: '#', - minWidth: '107px', - selector: 'id', - cell: row => {`#${row.id}`} - }, - { - name: , - minWidth: '102px', - selector: 'invoiceStatus', - sortable: true, - cell: row => { - const color = invoiceStatusObj[row.invoiceStatus] ? invoiceStatusObj[row.invoiceStatus].color : 'primary', - Icon = invoiceStatusObj[row.invoiceStatus] ? invoiceStatusObj[row.invoiceStatus].icon : Edit - return ( - - } id={`av-tooltip-${row.id}`} /> - - {row.invoiceStatus} -
- Balance: {row.balance} -
- Due Date: {row.dueDate} - - - ) - } - }, - { - name: 'Client', - minWidth: '350px', - selector: 'client', - sortable: true, - cell: row => { - const name = row.client ? row.client.name : 'John Doe', - email = row.client ? row.client.companyEmail : 'johnDoe@email.com' - return ( -
- {renderClient(row)} -
-
{name}
- {email} -
-
- ) - } - }, - { - name: 'Total', - selector: 'total', - sortable: true, - minWidth: '150px', - cell: row => ${row.total || 0} - }, - { - name: 'Issued Date', - selector: 'dueDate', - sortable: true, - minWidth: '200px', - cell: row => row.dueDate - }, - { - name: 'Balance', - selector: 'balance', - sortable: true, - minWidth: '164px', - cell: row => { - return row.balance !== 0 ? ( - {row.balance} - ) : ( - - Paid - - ) - } - }, - { - name: 'Action', - minWidth: '110px', - selector: '', - sortable: true, - cell: row => ( -
- - - Send Mail - - - - - - Preview Invoice - - - - - - - e.preventDefault()}> - - Download - - - - Edit - - { - e.preventDefault() - store.dispatch(deleteInvoice(row.id)) - }} - > - - Delete - - e.preventDefault()}> - - Duplicate - - - -
- ) - } -] diff --git a/src/views/apps/invoice/list/index.js b/src/views/apps/invoice/list/index.js deleted file mode 100644 index a7871d0..0000000 --- a/src/views/apps/invoice/list/index.js +++ /dev/null @@ -1,221 +0,0 @@ -// ** React Imports -import { useState, useEffect } from 'react' -import { Link } from 'react-router-dom' - -// ** Table Columns -import { columns } from './columns' - -// ** Third Party Components -import ReactPaginate from 'react-paginate' -import { ChevronDown } from 'react-feather' -import DataTable from 'react-data-table-component' -import { Button, Label, Input, CustomInput, Row, Col, Card } from 'reactstrap' - -// ** Store & Actions -import { getData } from '../store/actions' -import { useDispatch, useSelector } from 'react-redux' - -// ** Styles -import '@styles/react/apps/app-invoice.scss' -import '@styles/react/libs/tables/react-dataTable-component.scss' - -const CustomHeader = ({ handleFilter, value, handleStatusValue, statusValue, handlePerPage, rowsPerPage }) => { - return ( -
- - -
- - - - - - -
- - Add Record - - - -
- - handleFilter(e.target.value)} - placeholder='Search Invoice' - /> -
- - - - - - - - - - - -
- ) -} - -const InvoiceList = () => { - const dispatch = useDispatch() - const store = useSelector(state => state.invoice) - - const [value, setValue] = useState('') - const [currentPage, setCurrentPage] = useState(1) - const [statusValue, setStatusValue] = useState('') - const [rowsPerPage, setRowsPerPage] = useState(10) - - useEffect(() => { - dispatch( - getData({ - page: currentPage, - perPage: rowsPerPage, - status: statusValue, - q: value - }) - ) - }, [dispatch, store.data.length]) - - const handleFilter = val => { - setValue(val) - dispatch( - getData({ - page: currentPage, - perPage: rowsPerPage, - status: statusValue, - q: val - }) - ) - } - - const handlePerPage = e => { - dispatch( - getData({ - page: currentPage, - perPage: parseInt(e.target.value), - status: statusValue, - q: value - }) - ) - setRowsPerPage(parseInt(e.target.value)) - } - - const handleStatusValue = e => { - setStatusValue(e.target.value) - dispatch( - getData({ - page: currentPage, - perPage: rowsPerPage, - status: e.target.value, - q: value - }) - ) - } - - const handlePagination = page => { - dispatch( - getData({ - page: page.selected + 1, - perPage: rowsPerPage, - status: statusValue, - q: value - }) - ) - setCurrentPage(page.selected + 1) - } - - const CustomPagination = () => { - const count = Number((store.total / rowsPerPage).toFixed(0)) - - return ( - handlePagination(page)} - pageClassName={'page-item'} - nextLinkClassName={'page-link'} - nextClassName={'page-item next'} - previousClassName={'page-item prev'} - previousLinkClassName={'page-link'} - pageLinkClassName={'page-link'} - containerClassName={'pagination react-paginate justify-content-end p-1'} - /> - ) - } - - const dataToRender = () => { - const filters = { - status: statusValue, - q: value - } - - const isFiltered = Object.keys(filters).some(function (k) { - return filters[k].length > 0 - }) - - if (store.data.length > 0) { - return store.data - } else if (store.data.length === 0 && isFiltered) { - return [] - } else { - return store.allData.slice(0, rowsPerPage) - } - } - - return ( -
- -
- } - className='react-dataTable' - defaultSortField='invoiceId' - paginationDefaultPage={currentPage} - paginationComponent={CustomPagination} - data={dataToRender()} - subHeaderComponent={ - - } - /> -
- -
- ) -} - -export default InvoiceList diff --git a/src/views/apps/invoice/preview/PreviewActions.js b/src/views/apps/invoice/preview/PreviewActions.js deleted file mode 100644 index e219637..0000000 --- a/src/views/apps/invoice/preview/PreviewActions.js +++ /dev/null @@ -1,39 +0,0 @@ -// ** React Imports -import { Link } from 'react-router-dom' - -// ** Third Party Components -import { Card, CardBody, Button } from 'reactstrap' - -const PreviewActions = ({ id, setSendSidebarOpen, setAddPaymentOpen }) => { - return ( - - - setSendSidebarOpen(true)}> - Send Invoice - - - Download - - - Print - - - Edit - - setAddPaymentOpen(true)}> - Add Payment - - - - ) -} - -export default PreviewActions diff --git a/src/views/apps/invoice/preview/PreviewCard.js b/src/views/apps/invoice/preview/PreviewCard.js deleted file mode 100644 index 0021733..0000000 --- a/src/views/apps/invoice/preview/PreviewCard.js +++ /dev/null @@ -1,229 +0,0 @@ -// ** Third Party Components -import { Card, CardBody, CardText, Row, Col, Table } from 'reactstrap' - -const PreviewCard = ({ data }) => { - return data !== null ? ( - - - {/* Header */} -
-
-
- - - - - - - - - - - - - - - - - - - - - - - -

-
- Office 149, 450 South Brand Brooklyn - San Diego County, CA 91905, USA - +1 (123) 456 7891, +44 (876) 543 2198 -
-
-

- Invoice #{data.invoice.id} -

-
-

Date Issued:

-

{data.invoice.issuedDate}

-
-
-

Due Date:

-

{data.invoice.dueDate}

-
-
-
- {/* /Header */} - - -
- - {/* Address and Contact */} - - - -
Invoice To:
-
{data.invoice.client.name}
- {data.invoice.client.company} - {data.invoice.client.address} - {data.invoice.client.contact} - {data.invoice.client.companyEmail} - - -
Payment Details:
- - - - - - - - - - - - - - - - - - - - - - - -
Total Due: - {data.paymentDetails.totalDue} -
Bank name:{data.paymentDetails.bankName}
Country:{data.paymentDetails.country}
IBAN:{data.paymentDetails.iban}
SWIFT code:{data.paymentDetails.swiftCode}
- - - - {/* /Address and Contact */} - - {/* Invoice Description */} - - - - - - - - - - - - - - - - - - - - - - - -
Task descriptionRateHoursTotal
-

Native App Development

-

- Developed a full stack native app using React Native, Bootstrap & Python -

- 		- $60.00 - - 30 - - $1,800.00 -
-

Ui Kit Design

-

Designed a UI kit for native app using Sketch, Figma & Adobe XD

- 		- $60.00 - - 20 - - $1200.00 -
- {/* /Invoice Description */} - - {/* Total & Sales Person */} - - - - - Salesperson: Alfie Solomons - - - -
-
-

Subtotal:

-

$1800

-
-
-

Discount:

-

$28

-
-
-

Tax:

-

21%

-
-
-
-

Total:

-

$1690

-
-
- - - - {/* /Total & Sales Person */} - -
- - {/* Invoice Note */} - - - - Note: - - It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance - projects. Thank You! - - - - - {/* /Invoice Note */} - - ) : null -} - -export default PreviewCard diff --git a/src/views/apps/invoice/preview/index.js b/src/views/apps/invoice/preview/index.js deleted file mode 100644 index 8f85947..0000000 --- a/src/views/apps/invoice/preview/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import { useEffect, useState } from 'react' -import { useParams, Link } from 'react-router-dom' - -// ** Third Party Components -import axios from 'axios' -import { Row, Col, Alert } from 'reactstrap' - -// ** Invoice Preview Components -import PreviewCard from './PreviewCard' -import PreviewActions from './PreviewActions' -import SendInvoiceSidebar from '../shared-sidebar/SidebarSendInvoice' -import AddPaymentSidebar from '../shared-sidebar/SidebarAddPayment' - -// ** Styles -import '@styles/base/pages/app-invoice.scss' - -const InvoicePreview = () => { - // ** Vars - const { id } = useParams() - - // ** States - const [data, setData] = useState(null) - const [sendSidebarOpen, setSendSidebarOpen] = useState(false) - const [addPaymentOpen, setAddPaymentOpen] = useState(false) - - // ** Functions to toggle add & send sidebar - const toggleSendSidebar = () => setSendSidebarOpen(!sendSidebarOpen) - const toggleAddSidebar = () => setAddPaymentOpen(!addPaymentOpen) - - // ** Get invoice on mount based on id - useEffect(() => { - axios.get(`/api/invoice/invoices/${id}`).then(response => { - setData(response.data) - }) - }, []) - - return data !== null && data.invoice !== undefined ? ( -
- - - - - - - - - - -
- ) : ( - -

Invoice not found

-
- Invoice with id: {id} doesn't exist. Check list of all invoices: Invoice List -
- - ) -} - -export default InvoicePreview diff --git a/src/views/apps/invoice/print/index.js b/src/views/apps/invoice/print/index.js deleted file mode 100644 index 256f9d9..0000000 --- a/src/views/apps/invoice/print/index.js +++ /dev/null @@ -1,218 +0,0 @@ -// ** React Imports -import { useEffect } from 'react' - -// ** Third Party Components -import { Row, Col, Table } from 'reactstrap' - -// ** Styles -import '@styles/base/pages/app-invoice-print.scss' - -const Print = () => { - // ** Print on mount - useEffect(() => window.print(), []) - - return ( -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -

-
-

Office 149, 450 South Brand Brooklyn

-

San Diego County, CA 91905, USA

-

+1 (123) 456 7891, +44 (876) 543 2198

-
-
-

INVOICE #3492

-
- Date Issued: - 25/08/2020 -
-
- Due Date: - 29/08/2020 -
-
-
- -
- - - -
Invoice To:
-

Thomas shelby

-

Shelby Company Limited

-

Small Heath, B10 0HF, UK

-

718-986-6062

-

peakyFBlinders@gmail.com

- - -
Payment Details:
- - - - - - - - - - - - - - - - - - - - - - - -
Total Due: - $12,110.55 -
Bank name:American Bank
Country:United States
IBAN:ETD95476213874685
SWIFT code:BR91905
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Task descriptionRateHoursTotal
-

Native App Development

-

- Developed a full stack native app using React Native, Bootstrap & Python -

- 		- $60.00 - - 30 - - $1,800.00 -
-

Ui Kit Design

-

Designed a UI kit for native app using Sketch, Figma & Adobe XD

- 		- $60.00 - - 20 - - $1200.00 -
- - - -

- Salesperson: Alfie Solomons -

- - -
-
-

Subtotal:

-

$1800

-
-
-

Discount:

-

$28

-
-
-

Tax:

-

21%

-
-
-
-

Total:

-

$1690

-
-
- - - -
- - - - Note: - - It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance - projects. Thank You! - - - -
- ) -} - -export default Print diff --git a/src/views/apps/invoice/shared-sidebar/SidebarAddPayment.js b/src/views/apps/invoice/shared-sidebar/SidebarAddPayment.js deleted file mode 100644 index 117c6dc..0000000 --- a/src/views/apps/invoice/shared-sidebar/SidebarAddPayment.js +++ /dev/null @@ -1,78 +0,0 @@ -// ** React Imports -import { useState } from 'react' - -// ** Third Party Components -import Flatpickr from 'react-flatpickr' -import { Form, FormGroup, Input, Label, Button } from 'reactstrap' - -// ** Custom Components -import Sidebar from '@components/sidebar' - -// ** Styles -import '@styles/react/libs/flatpickr/flatpickr.scss' -import '@styles/base/pages/app-invoice.scss' - -const SidebarAddPayment = ({ open, toggleSidebar }) => { - // ** States - const [picker, setPicker] = useState(new Date()) - - return ( - -
- - - - - - - - - - setPicker(date)} className='form-control' /> - - - - - - - - - - - - - - - - - - - - -
- - ) -} - -export default SidebarAddPayment diff --git a/src/views/apps/invoice/shared-sidebar/SidebarSendInvoice.js b/src/views/apps/invoice/shared-sidebar/SidebarSendInvoice.js deleted file mode 100644 index d2badf2..0000000 --- a/src/views/apps/invoice/shared-sidebar/SidebarSendInvoice.js +++ /dev/null @@ -1,79 +0,0 @@ -// ** Custom Components -import Sidebar from '@components/sidebar' - -// ** Third Party Components -import { Link } from 'react-feather' -import { Form, FormGroup, Input, Label, Badge, Button } from 'reactstrap' - -const SidebarSendInvoice = ({ open, toggleSidebar }) => { - return ( - -
- - - - - - - - - - - - - - - - - - - - Invoice Attached - - - - - - -
- - ) -} - -export default SidebarSendInvoice diff --git a/src/views/apps/invoice/store/actions/index.js b/src/views/apps/invoice/store/actions/index.js deleted file mode 100644 index 6129db2..0000000 --- a/src/views/apps/invoice/store/actions/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import axios from 'axios' - -// ** Get data -export const getData = params => { - return dispatch => { - axios.get('/apps/invoice/invoices', params).then(response => { - dispatch({ - type: 'GET_DATA', - allData: response.data.allData, - data: response.data.invoices, - totalPages: response.data.total, - params - }) - }) - } -} - -// ** Delete Invoice -export const deleteInvoice = id => { - return (dispatch, getStore) => { - axios - .delete('/apps/invoice/delete', { id }) - .then(response => { - dispatch({ - type: 'DELETE_INVOICE' - }) - }) - .then(() => dispatch(getData(getStore().invoice.params))) - } -} diff --git a/src/views/apps/invoice/store/reducer/index.js b/src/views/apps/invoice/store/reducer/index.js deleted file mode 100644 index e081a02..0000000 --- a/src/views/apps/invoice/store/reducer/index.js +++ /dev/null @@ -1,24 +0,0 @@ -const initialState = { - data: [], - total: 1, - params: {}, - allData: [] -} - -const invoiceReducer = (state = initialState, action) => { - switch (action.type) { - case 'GET_DATA': - return { - ...state, - allData: action.allData, - data: action.data, - total: action.totalPages, - params: action.params - } - case 'DELETE_INVOICE': - return { ...state } - default: - return { ...state } - } -} -export default invoiceReducer diff --git a/src/views/apps/user/view/index.js b/src/views/apps/user/view/index.js index 74ee70a..cf88b3e 100644 --- a/src/views/apps/user/view/index.js +++ b/src/views/apps/user/view/index.js @@ -13,7 +13,6 @@ import { Row, Col, Alert } from 'reactstrap' import PlanCard from './PlanCard' import UserInfoCard from './UserInfoCard' import UserTimeline from './UserTimeline' -import InvoiceList from '../../invoice/list' import PermissionsTable from './PermissionsTable' // ** Styles diff --git a/src/views/extensions/access-control/index.js b/src/views/extensions/access-control/index.js deleted file mode 100644 index ee1a437..0000000 --- a/src/views/extensions/access-control/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import { useContext } from 'react' -import { AbilityContext } from '@src/utility/context/Can' -import { Row, Col, Card, CardBody, CardTitle, CardText } from 'reactstrap' - -const AccessControl = () => { - const ability = useContext(AbilityContext) - return ( - - - - - Common - No ability is required to view this card - This card is visible to 'user' and 'admin' both - - - - {ability.can('read', 'Analytics') ? ( - - - - Analytics - User with 'Analytics' subject's 'Read' ability can view this card - This card is visible to 'admin' only - - - - ) : null} - - ) -} - -export default AccessControl diff --git a/src/views/extensions/context-menu/ContextMenuAnimation.js b/src/views/extensions/context-menu/ContextMenuAnimation.js deleted file mode 100644 index 5fa3321..0000000 --- a/src/views/extensions/context-menu/ContextMenuAnimation.js +++ /dev/null @@ -1,86 +0,0 @@ -import { Fragment } from 'react' -import Avatar from '@components/avatar' -import { toast } from 'react-toastify' -import { Check } from 'react-feather' -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' -import { Menu, Item, useContextMenu, animation } from 'react-contexify' - -const ToastContent = ({ text }) => ( - -
-
- } /> -
Clicked {text}
-
-
- -) - -const ContextMenuAnimations = () => { - const { show: showFade } = useContextMenu({ - id: 'fade' - }) - const { show: showFlip } = useContextMenu({ - id: 'flip' - }) - const { show: showSlide } = useContextMenu({ - id: 'pop' - }) - - const handleClick = text => { - toast.success(, { hideProgressBar: true, closeButton: false }) - } - - const FadeMenu = () => { - return ( - - handleClick('Option 1')}>Option 1 - handleClick('Option 2')}>Option 2 - - ) - } - const FlipMenu = () => { - return ( - - handleClick('Option 1')}>Option 1 - handleClick('Option 2')}>Option 2 - - ) - } - const SlideMenu = () => { - return ( - - handleClick('Option 1')}>Option 1 - handleClick('Option 2')}>Option 2 - - ) - } - - return ( - - - Animations - - -
- - - - - -
- - - - - - ) -} - -export default ContextMenuAnimations diff --git a/src/views/extensions/context-menu/ContextMenuBasic.js b/src/views/extensions/context-menu/ContextMenuBasic.js deleted file mode 100644 index 165df02..0000000 --- a/src/views/extensions/context-menu/ContextMenuBasic.js +++ /dev/null @@ -1,46 +0,0 @@ -import { Fragment } from 'react' -import Avatar from '@components/avatar' -import { toast } from 'react-toastify' -import { Check } from 'react-feather' -import { Menu, Item, useContextMenu } from 'react-contexify' -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' - -const ToastContent = ({ text }) => ( - -
-
- } /> -
Clicked {text}
-
-
- -) - -const ContextMenuBasic = () => { - const { show } = useContextMenu({ - id: 'menu_id' - }) - - const handleClick = text => { - toast.success(, { hideProgressBar: true, closeButton: false }) - } - - return ( - - - Basic Context Menu - - - - - handleClick('Option 1')}>Item 1 - handleClick('Option 2')}>Item 2 - - - - ) -} - -export default ContextMenuBasic diff --git a/src/views/extensions/context-menu/ContextMenuDoubleClick.js b/src/views/extensions/context-menu/ContextMenuDoubleClick.js deleted file mode 100644 index 3d8338e..0000000 --- a/src/views/extensions/context-menu/ContextMenuDoubleClick.js +++ /dev/null @@ -1,46 +0,0 @@ -import { Fragment } from 'react' -import Avatar from '@components/avatar' -import { toast } from 'react-toastify' -import { Check } from 'react-feather' -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' -import { Menu, Item, useContextMenu } from 'react-contexify' - -const ToastContent = ({ text }) => ( - -
-
- } /> -
Clicked {text}
-
-
- -) - -const ContextMenuDoubleClick = () => { - const { show } = useContextMenu({ - id: 'menu_double' - }) - - const handleClick = text => { - toast.success(, { hideProgressBar: true, closeButton: false }) - } - - return ( - - - Double Click - - - - - handleClick('Option 1')}>Option 1 - handleClick('Option 2')}>Option 2 - - - - ) -} - -export default ContextMenuDoubleClick diff --git a/src/views/extensions/context-menu/ContextMenuLeftClick.js b/src/views/extensions/context-menu/ContextMenuLeftClick.js deleted file mode 100644 index 51a9115..0000000 --- a/src/views/extensions/context-menu/ContextMenuLeftClick.js +++ /dev/null @@ -1,46 +0,0 @@ -import { Fragment } from 'react' -import Avatar from '@components/avatar' -import { toast } from 'react-toastify' -import { Check } from 'react-feather' -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' -import { Menu, Item, useContextMenu } from 'react-contexify' - -const ToastContent = ({ text }) => ( - -
-
- } /> -
Clicked {text}
-
-
- -) - -const ContextMenuLeftClick = () => { - const { show } = useContextMenu({ - id: 'menu_left' - }) - - const handleClick = text => { - toast.success(, { hideProgressBar: true, closeButton: false }) - } - - return ( - - - Left Click - - - - - handleClick('Option 1')}>Option 1 - handleClick('Option 2')}>Option 2 - - - - ) -} - -export default ContextMenuLeftClick diff --git a/src/views/extensions/context-menu/ContextSubmenu.js b/src/views/extensions/context-menu/ContextSubmenu.js deleted file mode 100644 index 8027f2f..0000000 --- a/src/views/extensions/context-menu/ContextSubmenu.js +++ /dev/null @@ -1,55 +0,0 @@ -import { Fragment } from 'react' -import Avatar from '@components/avatar' -import { toast } from 'react-toastify' -import { Check } from 'react-feather' -import { Menu, Item, Submenu, useContextMenu } from 'react-contexify' -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' - -const ToastContent = ({ text }) => ( - -
-
- } /> -
Clicked {text}
-
-
- -) - -const ContextSubMenu = () => { - const { show } = useContextMenu({ - id: 'submenu_id' - }) - - const handleClick = text => { - toast.success(, { hideProgressBar: true, closeButton: false }) - } - - return ( - - - Sub Menu - - - - - handleClick('Option 1')}>Option 1 - handleClick('Option 2')}>Option 2 - Option 3 - - handleClick('Foo Bar')}>Foo Bar - - handleClick('Echo')}>Echo - handleClick('Foxtrot')}>Foxtrot - handleClick('Golf')}>Golf - - - - - - ) -} - -export default ContextSubMenu diff --git a/src/views/extensions/context-menu/index.js b/src/views/extensions/context-menu/index.js deleted file mode 100644 index 22d7ce7..0000000 --- a/src/views/extensions/context-menu/index.js +++ /dev/null @@ -1,42 +0,0 @@ -import { Fragment } from 'react' -import ExtensionsHeader from '@components/extensions-header' -import { Row, Col } from 'reactstrap' -import ContextMenuBasic from './ContextMenuBasic' -import ContextMenuLeftClick from './ContextMenuLeftClick' -import ContextMenuDoubleClick from './ContextMenuDoubleClick' -import ContextSubMenu from './ContextSubmenu' -import ContextMenuAnimation from './ContextMenuAnimation' - -import 'react-contexify/dist/ReactContexify.min.css' -import '@styles/react/libs/context-menu/context-menu.scss' - -const Contexify = () => { - return ( - - - - - - - - - - - - - - - - - - - - - ) -} - -export default Contexify diff --git a/src/views/extensions/copy-to-clipboard/index.js b/src/views/extensions/copy-to-clipboard/index.js deleted file mode 100644 index 1b05068..0000000 --- a/src/views/extensions/copy-to-clipboard/index.js +++ /dev/null @@ -1,74 +0,0 @@ -import { Fragment, useState } from 'react' -import { toast } from 'react-toastify' -import { Check } from 'react-feather' -import Avatar from '@components/avatar' -import { CopyToClipboard } from 'react-copy-to-clipboard' -import ExtensionsHeader from '@components/extensions-header' -import { Row, Col, Card, CardHeader, CardTitle, CardBody, Button, Input } from 'reactstrap' - -const ToastSuccess = () => ( - -
-
- } /> -
Copied To Clipboard !
-
-
- -) - -/*eslint-disable */ -const Clipboard = () => { - const [value, setValue] = useState('Copy Me!') - const [copied, setCopied] = useState(false) - /*eslint-enable */ - - const handleCopy = ({ target: { value } }) => { - setValue(value) - setCopied(false) - } - - const onCopy = () => { - setCopied(true) - toast.success(, { - autoClose: 3000, - hideProgressBar: true, - closeButton: false - }) - } - - return ( - - - - - - - Clipboard - - - - - - - - - - Copy! - - - - - - - - - - ) -} - -export default Clipboard diff --git a/src/views/extensions/drag-and-drop/DndCards.js b/src/views/extensions/drag-and-drop/DndCards.js deleted file mode 100644 index 41579a5..0000000 --- a/src/views/extensions/drag-and-drop/DndCards.js +++ /dev/null @@ -1,53 +0,0 @@ -import { useState } from 'react' -import { ReactSortable } from 'react-sortablejs' -import { Card, CardHeader, CardBody, CardTitle, CardText, Col } from 'reactstrap' - -const dragItems = [ - { - id: '1', - title: 'Draggable Card 1', - content: - 'Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet roll marzipan pastry cookie cake tootsie roll oat cake cookie.' - }, - { - id: '2', - title: 'Draggable Card 2', - content: - 'Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet roll marzipan pastry cookie cake tootsie roll oat cake cookie.' - }, - { - id: '3', - title: 'Draggable Card 3', - content: - 'Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet roll marzipan pastry cookie cake tootsie roll oat cake cookie.' - }, - { - id: '4', - title: 'Draggable Card 4', - content: - 'Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet roll marzipan pastry cookie cake tootsie roll oat cake cookie.' - } -] - -const DndCards = () => { - const [cardsArr, setCardsArr] = useState(dragItems) - - return ( - - {cardsArr.map(item => ( - - - - {item.title} - - - {item.content} - - - - ))} - - ) -} - -export default DndCards diff --git a/src/views/extensions/drag-and-drop/DndClone.js b/src/views/extensions/drag-and-drop/DndClone.js deleted file mode 100644 index 8e156f6..0000000 --- a/src/views/extensions/drag-and-drop/DndClone.js +++ /dev/null @@ -1,112 +0,0 @@ -import { useState } from 'react' -import { ReactSortable } from 'react-sortablejs' -import { Card, CardHeader, CardTitle, CardBody, CardText, Row, Col, Badge } from 'reactstrap' - -const DndClone = () => { - const source1 = [ - { - text: 'Youtube', - color: 'light-secondary' - }, - { - text: 'Facebook', - color: 'light-primary' - }, - { - text: 'Google', - color: 'light-success' - }, - { - text: 'Instagram', - color: 'light-danger' - }, - { - text: 'Twitter', - color: 'light-info' - }, - { - text: 'Discord', - color: 'light-warning' - } - ] - const source2 = [ - { - text: 'Github', - color: 'light-secondary' - }, - { - text: 'Gitlab', - color: 'light-primary' - }, - { - text: 'Slack', - color: 'light-success' - }, - { - text: 'Pinterest', - color: 'light-danger' - }, - { - text: 'Tinder', - color: 'light-info' - }, - { - text: 'Amazon', - color: 'light-warning' - } - ] - - const [list, setList] = useState(source1) - const [list2, setList2] = useState(source2) - - return ( - - - Clone List - - - - Add pull:clone with your group prop to clone items. - - - -

Badge Source 1

- - {list.map(item => { - return ( - - {item.text} - - ) - })} - - - -

Badge Source 2

- - {list2.map(item => { - return ( - - {item.text} - - ) - })} - - - - - - ) -} - -export default DndClone diff --git a/src/views/extensions/drag-and-drop/DndHandle.js b/src/views/extensions/drag-and-drop/DndHandle.js deleted file mode 100644 index 1c5f7af..0000000 --- a/src/views/extensions/drag-and-drop/DndHandle.js +++ /dev/null @@ -1,112 +0,0 @@ -import { useState } from 'react' -import { ReactSortable } from 'react-sortablejs' -import { Card, CardHeader, CardTitle, CardBody, CardText, Row, Col, ListGroupItem } from 'reactstrap' - -const array = { - list1: [ - { - id: '1', - content: 'Cras justo odio' - }, - { - id: '2', - content: 'Dapibus ac facilisis in' - }, - { - id: '3', - content: 'Morbi leo risus' - }, - { - id: '4', - content: 'Porta ac consectetur ac' - }, - { - id: '5', - content: 'Vestibulum at eros' - } - ], - list2: [ - { - id: '6', - content: 'Cras justo odio' - }, - { - id: '7', - content: 'Dapibus ac facilisis in' - }, - { - id: '8', - content: 'Morbi leo risus' - }, - { - id: '9', - content: 'Porta ac consectetur ac' - }, - { - id: '10', - content: 'Vestibulum at eros' - } - ] -} - -const DndMultiple = () => { - const [listArr1, setListArr1] = useState(array.list1) - const [listArr2, setListArr2] = useState(array.list2) - - return ( - - - Drag And Drop With Handle - - - - Add handle to your items using handle prop. - - - -

List One

- - {listArr1.map(item => { - return ( - - + - {item.content} - - ) - })} - - - -

People Group 2

- - {listArr2.map(item => { - return ( - - + - {item.content} - - ) - })} - - - - - - ) -} - -export default DndMultiple diff --git a/src/views/extensions/drag-and-drop/DndListGroup.js b/src/views/extensions/drag-and-drop/DndListGroup.js deleted file mode 100644 index c26c82a..0000000 --- a/src/views/extensions/drag-and-drop/DndListGroup.js +++ /dev/null @@ -1,83 +0,0 @@ -import { useState } from 'react' -import { ReactSortable } from 'react-sortablejs' -import img1 from '@src/assets/images/portrait/small/avatar-s-12.jpg' -import img2 from '@src/assets/images/portrait/small/avatar-s-1.jpg' -import img3 from '@src/assets/images/portrait/small/avatar-s-2.jpg' -import img4 from '@src/assets/images/portrait/small/avatar-s-3.jpg' -import img5 from '@src/assets/images/portrait/small/avatar-s-4.jpg' -import { Card, CardHeader, CardTitle, CardBody, CardText, ListGroupItem, Media } from 'reactstrap' - -const listItems = [ - { - id: '1', - img: img1, - name: 'Mary S. Navarre', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - }, - { - id: '2', - img: img2, - name: 'Samuel M. Ellis', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '3', - img: img3, - name: 'Sandra C. Toney', - content: 'Sugar plum fruitcake gummies marzipan liquorice tiramisu. Pastry liquorice chupa chupsake.' - }, - { - id: '4', - img: img4, - name: 'Cleveland C. Goins', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '5', - img: img5, - name: 'Linda M. English', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - } -] - -const DndListGroup = () => { - const [listArr, setListArr] = useState(listItems) - return ( - - - Basic List Group Sortable - - - - The most basic list group is simply an unordered list with list items, and the proper classes. - - - {listArr.map(item => { - return ( - - - - - - -
{item.name}
- {item.content} - - - - ) - })} - - - - ) -} - -export default DndListGroup diff --git a/src/views/extensions/drag-and-drop/DndMultiDrag.js b/src/views/extensions/drag-and-drop/DndMultiDrag.js deleted file mode 100644 index 46f210b..0000000 --- a/src/views/extensions/drag-and-drop/DndMultiDrag.js +++ /dev/null @@ -1,173 +0,0 @@ -import { useState } from 'react' -import img1 from '@src/assets/images/portrait/small/avatar-s-12.jpg' -import img2 from '@src/assets/images/portrait/small/avatar-s-1.jpg' -import img3 from '@src/assets/images/portrait/small/avatar-s-2.jpg' -import img4 from '@src/assets/images/portrait/small/avatar-s-3.jpg' -import img5 from '@src/assets/images/portrait/small/avatar-s-4.jpg' -import img6 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import img7 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import img8 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import img9 from '@src/assets/images/portrait/small/avatar-s-8.jpg' -import img10 from '@src/assets/images/portrait/small/avatar-s-9.jpg' -import { ReactSortable, Sortable, MultiDrag } from 'react-sortablejs' -import { Card, CardHeader, CardTitle, CardBody, CardText, Row, Col, ListGroupItem, Media } from 'reactstrap' - -const array = { - list1: [ - { - id: '1', - img: img1, - name: 'Mary S. Navarre', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - }, - { - id: '2', - img: img2, - name: 'Samuel M. Ellis', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '3', - img: img3, - name: 'Sandra C. Toney', - content: 'Sugar plum fruitcake gummies marzipan liquorice tiramisu. Pastry liquorice chupa.' - }, - { - id: '4', - img: img4, - name: 'Cleveland C. Goins', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '5', - img: img5, - name: 'Linda M. English', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - } - ], - list2: [ - { - id: '6', - img: img6, - name: 'Alexandria I. Smelser', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '7', - img: img7, - name: 'Oscar N. Pool', - content: 'Sugar plum fruitcake gummies marzipan liquorice tiramisu. Pastry liquorice chupsake.' - }, - { - id: '8', - img: img8, - name: 'Kathy A. Alvarado', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - }, - { - id: '9', - img: img9, - name: 'James E. White', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '10', - img: img10, - name: 'Roberta R. Babin', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - } - ] -} - -// Sortable.mount(new MultiDrag()) -const DndMultiDrag = () => { - const [listArr1, setListArr1] = useState(array.list1) - const [listArr2, setListArr2] = useState(array.list2) - - return ( - - - Multiple Drag - - - - Use MultiDrag prop to create a multiple drag list. - - - Use CTRL key to select multiple items. - - - -

People Group 1

- - {listArr1.map(item => { - return ( - - - - - - -
{item.name}
- {item.content} - - - - ) - })} - - - -

People Group 2

- - {listArr2.map(item => { - return ( - - - - - - -
{item.name}
- {item.content} - - - - ) - })} - - - - - - ) -} - -export default DndMultiDrag diff --git a/src/views/extensions/drag-and-drop/DndMultiple.js b/src/views/extensions/drag-and-drop/DndMultiple.js deleted file mode 100644 index de66f54..0000000 --- a/src/views/extensions/drag-and-drop/DndMultiple.js +++ /dev/null @@ -1,168 +0,0 @@ -import { useState } from 'react' -import { ReactSortable } from 'react-sortablejs' -import img1 from '@src/assets/images/portrait/small/avatar-s-12.jpg' -import img2 from '@src/assets/images/portrait/small/avatar-s-1.jpg' -import img3 from '@src/assets/images/portrait/small/avatar-s-2.jpg' -import img4 from '@src/assets/images/portrait/small/avatar-s-3.jpg' -import img5 from '@src/assets/images/portrait/small/avatar-s-4.jpg' -import img6 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import img7 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import img8 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import img9 from '@src/assets/images/portrait/small/avatar-s-8.jpg' -import img10 from '@src/assets/images/portrait/small/avatar-s-9.jpg' -import { Card, CardHeader, CardTitle, CardBody, CardText, Row, Col, ListGroupItem, Media } from 'reactstrap' - -const array = { - list1: [ - { - id: '1', - img: img1, - name: 'Mary S. Navarre', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - }, - { - id: '2', - img: img2, - name: 'Samuel M. Ellis', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '3', - img: img3, - name: 'Sandra C. Toney', - content: 'Sugar plum fruitcake gummies marzipan liquorice tiramisu. Pastry liquorice chupa.' - }, - { - id: '4', - img: img4, - name: 'Cleveland C. Goins', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '5', - img: img5, - name: 'Linda M. English', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - } - ], - list2: [ - { - id: '6', - img: img6, - name: 'Alexandria I. Smelser', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '7', - img: img7, - name: 'Oscar N. Pool', - content: 'Sugar plum fruitcake gummies marzipan liquorice tiramisu. Pastry liquorice chupsake.' - }, - { - id: '8', - img: img8, - name: 'Kathy A. Alvarado', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - }, - { - id: '9', - img: img9, - name: 'James E. White', - content: 'Toffee powder marzipan tiramisu. Cake cake dessert danish.' - }, - { - id: '10', - img: img10, - name: 'Roberta R. Babin', - content: 'Chupa chups tiramisu apple pie biscuit sweet roll bonbon macaroon toffee icing.' - } - ] -} - -const DndMultiple = () => { - const [listArr1, setListArr1] = useState(array.list1) - const [listArr2, setListArr2] = useState(array.list2) - - return ( - - - Multiple Lists - - - - Use group prop to create a multiple list Drag & Drop. - - - -

People Group 1

- - {listArr1.map(item => { - return ( - - - - - - -
{item.name}
- {item.content} - - - - ) - })} - - - -

People Group 2

- - {listArr2.map(item => { - return ( - - - - - - -
{item.name}
- {item.content} - - - - ) - })} - - - - - - ) -} - -export default DndMultiple diff --git a/src/views/extensions/drag-and-drop/index.js b/src/views/extensions/drag-and-drop/index.js deleted file mode 100644 index 320b0a0..0000000 --- a/src/views/extensions/drag-and-drop/index.js +++ /dev/null @@ -1,45 +0,0 @@ -import { Fragment } from 'react' -import DndClone from './DndClone' -import DndCards from './DndCards' -import DndHandle from './DndHandle' -import { Row, Col } from 'reactstrap' -import DndMultiple from './DndMultiple' -import DndMultiDrag from './DndMultiDrag' -import DndListGroup from './DndListGroup' -import ExtensionsHeader from '@components/extensions-header' - -import '@styles/react/libs/drag-and-drop/drag-and-drop.scss' - -const DragAndDrop = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default DragAndDrop diff --git a/src/views/extensions/i18n/index.js b/src/views/extensions/i18n/index.js deleted file mode 100644 index d258dc8..0000000 --- a/src/views/extensions/i18n/index.js +++ /dev/null @@ -1,81 +0,0 @@ -import { Fragment, useContext } from 'react' -import { Row, Col, Card, CardHeader, CardTitle, CardBody, CustomInput } from 'reactstrap' -import ExtensionsHeader from '@components/extensions-header' -import { IntlContext } from '../../../utility/context/Internationalization' -import { FormattedMessage } from 'react-intl' -const I18nExtension = () => { - const context = useContext(IntlContext) - return ( - - - - - - - - Change Locale - - -
- { - context.switchLanguage('en') - }} - label='English' - className='mb-1' - defaultChecked={context.locale === 'en'} - /> - { - context.switchLanguage('fr') - }} - label='French' - className='mb-1' - defaultChecked={context.locale === 'fr'} - /> - { - context.switchLanguage('de') - }} - label='German' - className='mb-1' - defaultChecked={context.locale === 'de'} - /> - { - context.switchLanguage('pt') - }} - label='Portuguese' - className='mb-1' - defaultChecked={context.locale === 'pt'} - /> -
-
-
Title
- -
- - - - - - ) -} - -export default I18nExtension diff --git a/src/views/extensions/import-export/Export.js b/src/views/extensions/import-export/Export.js deleted file mode 100644 index 29b0715..0000000 --- a/src/views/extensions/import-export/Export.js +++ /dev/null @@ -1,245 +0,0 @@ -import { Fragment, useState, useRef } from 'react' -import ExtensionsHeader from '@components/extensions-header' -import XLSX from 'xlsx' -import * as FileSaver from 'file-saver' -import { - Row, - Col, - Card, - CardBody, - Button, - Table, - Modal, - ModalHeader, - ModalBody, - ModalFooter, - Input, - FormGroup, - CustomInput, - Label -} from 'reactstrap' - -const initialData = [ - { - id: 1, - name: 'Leanne Graham', - username: 'Bret', - email: 'Sincere@april.biz', - website: 'hildegard.org' - }, - { - id: 2, - name: 'Ervin Howell', - username: 'Antonette', - email: 'Shanna@melissa.tv', - website: 'anastasia.net' - }, - { - id: 3, - name: 'Clementine Bauch', - username: 'Samantha', - email: 'Nathan@yesenia.net', - website: 'ramiro.info' - }, - { - id: 4, - name: 'Patricia Lebsack', - username: 'Karianne', - email: 'Julianne.OConner@kory.org', - website: 'kale.biz' - }, - { - id: 5, - name: 'Chelsey Dietrich', - username: 'Kamren', - email: 'Lucio_Hettinger@annie.ca', - website: 'demarco.info' - }, - { - id: 6, - name: 'Mrs. Dennis Schulist', - username: 'Leopoldo_Corkery', - email: 'Karley_Dach@jasper.info', - website: 'ola.org' - }, - { - id: 7, - name: 'Kurtis Weissnat', - username: 'Elwyn.Skiles', - email: 'Telly.Hoeger@billy.biz', - website: 'elvis.io' - }, - { - id: 8, - name: 'Nicholas Runolfsdottir V', - username: 'Maxime_Nienow', - email: 'Sherwood@rosamond.me', - website: 'jacynthe.com' - }, - { - id: 9, - name: 'Glenna Reichert', - username: 'Delphine', - email: 'Chaim_McDermott@dana.io', - website: 'conrad.com' - }, - { - id: 10, - name: 'Clementina DuBuque', - username: 'Moriah.Stanton', - email: 'Rey.Padberg@karina.biz', - website: 'ambrose.net' - } -] - -const Export = () => { - const tableRef = useRef() - - const [data] = useState(initialData) - const [filteredData, setFilteredData] = useState([]) - const [value, setValue] = useState('') - const [modal, setModal] = useState(false) - const [fileName, setFileName] = useState('') - const [fileFormat, setFileFormat] = useState('xlsx') - - const toggleModal = () => { - setModal(!modal) - } - - const handleFilter = e => { - const dataArr = data - let filteredData = [] - const value = e.target.value - setValue(value) - if (value.length) { - filteredData = dataArr.filter(col => { - const startsWithCondition = - col.name.toLowerCase().startsWith(value.toLowerCase()) || - col.email.toLowerCase().startsWith(value.toLowerCase()) || - col.website.toLowerCase().startsWith(value.toLowerCase()) || - col.id.toString().toLowerCase().startsWith(value.toLowerCase()) - - const includesCondition = - col.name.toLowerCase().includes(value.toLowerCase()) || - col.email.toLowerCase().includes(value.toLowerCase()) || - col.website.toLowerCase().includes(value.toLowerCase()) || - col.id.toString().toLowerCase().includes(value.toLowerCase()) - - if (startsWithCondition) return startsWithCondition - else if (!startsWithCondition && includesCondition) return includesCondition - else return null - }) - setFilteredData(filteredData) - setValue(value) - } - } - - const handleExport = () => { - toggleModal() - const bookType = fileFormat - const wb = XLSX.utils.table_to_book(tableRef.current, { sheet: 'Sheet JS' }) - const wbout = XLSX.write(wb, { bookType, bookSST: true, type: 'binary' }) - - const s2ab = s => { - const buf = new ArrayBuffer(s.length) - const view = new Uint8Array(buf) - for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff - return buf - } - const file = fileName.length ? `${fileName}.${fileFormat}` : `excel-sheet.${fileFormat}` - - return FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), file) - } - - const array = value ? filteredData : data - const renderTableData = array.map(col => { - return ( - - {col.email} - {col.name} - {col.website} - {col.id} - - ) - }) - return ( - - - - - - -
- toggleModal()}> - Export - -
- - handleFilter(e)} /> -
-
- - - - - - - - - - - {renderTableData} -
EmailNameWebsiteRank
- - - - toggleModal()} - className='modal-dialog-centered' - onClosed={() => setFileName('')} - > - toggleModal()}>Export To Excel - - - setFileName(e.target.value)} - placeholder='Enter File Name' - /> - - - setFileFormat(e.target.value)} - > - - - - - - - - - - - - - ) -} - -export default Export diff --git a/src/views/extensions/import-export/ExportSelected.js b/src/views/extensions/import-export/ExportSelected.js deleted file mode 100644 index 55944b7..0000000 --- a/src/views/extensions/import-export/ExportSelected.js +++ /dev/null @@ -1,295 +0,0 @@ -import { Fragment, useState } from 'react' -import ExtensionsHeader from '@components/extensions-header' -import { - Row, - Col, - Card, - CardBody, - Button, - Table, - Modal, - ModalHeader, - ModalBody, - ModalFooter, - Input, - FormGroup, - CustomInput, - Label -} from 'reactstrap' -import classnames from 'classnames' -import XLSX from 'xlsx' - -const initialData = [ - { - id: 1, - name: 'Leanne Graham', - username: 'Bret', - email: 'Sincere@april.biz', - website: 'hildegard.org' - }, - { - id: 2, - name: 'Ervin Howell', - username: 'Antonette', - email: 'Shanna@melissa.tv', - website: 'anastasia.net' - }, - { - id: 3, - name: 'Clementine Bauch', - username: 'Samantha', - email: 'Nathan@yesenia.net', - website: 'ramiro.info' - }, - { - id: 4, - name: 'Patricia Lebsack', - username: 'Karianne', - email: 'Julianne.OConner@kory.org', - website: 'kale.biz' - }, - { - id: 5, - name: 'Chelsey Dietrich', - username: 'Kamren', - email: 'Lucio_Hettinger@annie.ca', - website: 'demarco.info' - }, - { - id: 6, - name: 'Mrs. Dennis Schulist', - username: 'Leopoldo_Corkery', - email: 'Karley_Dach@jasper.info', - website: 'ola.org' - }, - { - id: 7, - name: 'Kurtis Weissnat', - username: 'Elwyn.Skiles', - email: 'Telly.Hoeger@billy.biz', - website: 'elvis.io' - }, - { - id: 8, - name: 'Nicholas Runolfsdottir V', - username: 'Maxime_Nienow', - email: 'Sherwood@rosamond.me', - website: 'jacynthe.com' - }, - { - id: 9, - name: 'Glenna Reichert', - username: 'Delphine', - email: 'Chaim_McDermott@dana.io', - website: 'conrad.com' - }, - { - id: 10, - name: 'Clementina DuBuque', - username: 'Moriah.Stanton', - email: 'Rey.Padberg@karina.biz', - website: 'ambrose.net' - } -] - -const ExportSelected = () => { - const [data] = useState(initialData) - const [filteredData, setFilteredData] = useState([]) - const [dataToExport, setDataToExport] = useState([]) - const [value, setValue] = useState('') - const [modal, setModal] = useState(false) - const [fileName, setFileName] = useState('') - const [fileFormat, setFileFormat] = useState('xlsx') - const [selectedRows, setSelectedRows] = useState([]) - - const toggleModal = () => setModal(!modal) - - const handleFilter = e => { - let filteredData = [] - const value = e.target.value - setValue(value) - if (value.length) { - filteredData = data.filter(col => { - const startsWithCondition = - col.name.toLowerCase().startsWith(value.toLowerCase()) || - col.email.toLowerCase().startsWith(value.toLowerCase()) || - col.website.toLowerCase().startsWith(value.toLowerCase()) || - col.id.toString().toLowerCase().startsWith(value.toLowerCase()) - - const includesCondition = - col.name.toLowerCase().includes(value.toLowerCase()) || - col.email.toLowerCase().includes(value.toLowerCase()) || - col.website.toLowerCase().includes(value.toLowerCase()) || - col.id.toString().toLowerCase().includes(value.toLowerCase()) - - if (startsWithCondition) return startsWithCondition - else if (!startsWithCondition && includesCondition) return includesCondition - else return null - }) - setValue(value) - setFilteredData(filteredData) - } - } - - const handleExport = () => { - const exportArr = dataToExport - data.map(item => { - if (selectedRows.includes(item.id)) { - return exportArr.push(item) - } else { - return null - } - }) - setDataToExport([...exportArr]) - const name = fileName.length ? `${fileName}.${fileFormat}` : `excel-sheet.${fileFormat}` - const wb = XLSX.utils.json_to_sheet(dataToExport) - const wbout = XLSX.utils.book_new() - XLSX.utils.book_append_sheet(wbout, wb, 'test') - XLSX.writeFile(wbout, name) - toggleModal() - } - - const handleSelect = id => { - const selectedRowsArr = selectedRows - if (!selectedRowsArr.includes(id)) { - selectedRowsArr.push(id) - } else if (selectedRowsArr.includes(id)) { - selectedRowsArr.splice(selectedRowsArr.indexOf(id), 1) - } else { - return null - } - setSelectedRows([...selectedRowsArr]) - } - - const handleSelectAll = () => { - let selectedRowsArr = selectedRows - if (selectedRowsArr.length < data.length) { - const ids = data.map(i => i.id) - selectedRowsArr = ids - } else if (selectedRowsArr.length === data.length) { - selectedRowsArr = [] - } else { - return null - } - - setSelectedRows(selectedRowsArr) - } - - const array = value ? filteredData : data - const renderTableData = array.map(col => { - return ( - - - handleSelect(col.id)} - /> - - {col.email} - {col.name} - {col.website} - {col.id} - - ) - }) - - return ( - - - - - - -
- toggleModal()}> - Export Selected - -
- - handleFilter(e)} /> -
-
- - - - - - - - - - - - {renderTableData} -
- handleSelectAll()} - /> - EmailNameWebsiteRank
- - - - toggleModal()} - className='modal-dialog-centered' - onClosed={() => setFileName('')} - > - toggleModal()}>Export To Excel - - - setFileName(e.target.value)} - placeholder='Enter File Name' - /> - - - { - setFileFormat(e.target.value) - }} - > - - - - - - - - - - - - - ) -} - -export default ExportSelected diff --git a/src/views/extensions/import-export/Import.js b/src/views/extensions/import-export/Import.js deleted file mode 100644 index c4480f2..0000000 --- a/src/views/extensions/import-export/Import.js +++ /dev/null @@ -1,170 +0,0 @@ -import { Fragment, useState } from 'react' -import XLSX from 'xlsx' -import Uppy from '@uppy/core' -import { X } from 'react-feather' -import { DragDrop } from '@uppy/react' -import Avatar from '@components/avatar' -import { toast } from 'react-toastify' -import ExtensionsHeader from '@components/extensions-header' -import { Row, Col, Card, CardBody, Table, CardHeader, CardTitle, Input, Label } from 'reactstrap' - -import 'uppy/dist/uppy.css' -import '@uppy/status-bar/dist/style.css' -import '@styles/react/libs/file-uploader/file-uploader.scss' - -const ErrorToast = () => ( - -
-
- } /> -
Error!
-
- a second ago -
-
- - 👋 You can only upload .xlsx,{' '} - .xls & .csv Files!. - -
- -) - -const Import = () => { - const [tableData, setTableData] = useState([]) - const [filteredData, setFilteredData] = useState([]) - const [value, setValue] = useState('') - const [name, setName] = useState('') - - const uppy = new Uppy({ - restrictions: { maxNumberOfFiles: 1 }, - autoProceed: true - }) - - const getTableData = (arr, name) => { - setTableData(arr) - setName(name) - } - - uppy.on('complete', result => { - const reader = new FileReader() - reader.onload = function () { - const fileData = reader.result - const wb = XLSX.read(fileData, { type: 'binary' }) - - wb.SheetNames.forEach(function (sheetName) { - const rowObj = XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]) - getTableData(rowObj, result.successful[0].data.name) - }) - } - if (result.successful[0].extension === 'xlsx') { - reader.readAsBinaryString(result.successful[0].data) - } else { - toast.error(, { hideProgressBar: true }) - } - }) - - const handleFilter = e => { - const data = tableData - let filteredData = [] - const value = e.target.value - setValue(value) - - if (value.length) { - filteredData = data.filter(col => { - const keys = Object.keys(col) - - const startsWithCondition = keys.filter(key => { - return col[key].toString().toLowerCase().startsWith(value.toLowerCase()) - }) - - const includesCondition = keys.filter(key => col[key].toString().toLowerCase().includes(value.toLowerCase())) - - if (startsWithCondition.length) return col[startsWithCondition] - else if (!startsWithCondition && includesCondition.length) return col[includesCondition] - else return null - }) - setFilteredData(filteredData) - setValue(value) - } else { - return null - } - } - /*eslint-disable */ - const headArr = tableData.length - ? tableData.map((col, index) => { - if (index === 0) return [...Object.keys(col)] - else return null - }) - : [] - /*eslint-enable */ - const dataArr = value.length ? filteredData : tableData.length && !value.length ? tableData : null - - const renderTableBody = () => { - if (dataArr !== null && dataArr.length) { - return dataArr.map((col, index) => { - const keys = Object.keys(col) - const renderTd = keys.map((key, index) => {col[key]}) - return {renderTd} - }) - } else { - return null - } - } - - const renderTableHead = () => { - if (headArr.length) { - return headArr[0].map((head, index) => { - return {head} - }) - } else { - return null - } - } - - return ( - - - - - - - - - - - - - - - {tableData.length ? ( - - - - {name} -
- - handleFilter(e)} /> -
- - - - {renderTableHead()} - - {renderTableBody()} -
- - - ) : null} - - - ) -} - -export default Import diff --git a/src/views/extensions/pagination/BasicPagination.js b/src/views/extensions/pagination/BasicPagination.js deleted file mode 100644 index 3c431eb..0000000 --- a/src/views/extensions/pagination/BasicPagination.js +++ /dev/null @@ -1,32 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPaginate from 'react-paginate' -const BasicPagination = () => { - return ( - - - Basic - - - - - - ) -} -export default BasicPagination diff --git a/src/views/extensions/pagination/PaginationDanger.js b/src/views/extensions/pagination/PaginationDanger.js deleted file mode 100644 index 088ed67..0000000 --- a/src/views/extensions/pagination/PaginationDanger.js +++ /dev/null @@ -1,33 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPaginate from 'react-paginate' - -const PaginationDanger = () => { - return ( - - - Danger - - - - - - ) -} -export default PaginationDanger diff --git a/src/views/extensions/pagination/PaginationIcon.js b/src/views/extensions/pagination/PaginationIcon.js deleted file mode 100644 index 4741132..0000000 --- a/src/views/extensions/pagination/PaginationIcon.js +++ /dev/null @@ -1,33 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPaginate from 'react-paginate' - -const IconPagination = () => { - return ( - - - Icon Only - - - - - - ) -} -export default IconPagination diff --git a/src/views/extensions/pagination/PaginationIconText.js b/src/views/extensions/pagination/PaginationIconText.js deleted file mode 100644 index 3380d2b..0000000 --- a/src/views/extensions/pagination/PaginationIconText.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPaginate from 'react-paginate' - -const Previous = () => { - return Prev -} - -const Next = () => { - return Next -} - -const IconTextPagination = () => { - return ( - - - With icon and text - - - } - breakLabel={'...'} - pageRangeDisplayed={5} - marginPagesDisplayed={2} - activeClassName={'active'} - pageClassName={'page-item'} - previousLabel={} - nextLinkClassName={'page-link'} - nextClassName={'page-item next'} - previousClassName={'page-item prev'} - previousLinkClassName={'page-link'} - pageLinkClassName={'page-link'} - breakClassName='page-item' - breakLinkClassName='page-link' - containerClassName={'pagination react-paginate'} - /> - - - ) -} -export default IconTextPagination diff --git a/src/views/extensions/pagination/PaginationInfo.js b/src/views/extensions/pagination/PaginationInfo.js deleted file mode 100644 index 6d7df8c..0000000 --- a/src/views/extensions/pagination/PaginationInfo.js +++ /dev/null @@ -1,33 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPaginate from 'react-paginate' - -const PaginationInfo = () => { - return ( - - - Info - - - - - - ) -} -export default PaginationInfo diff --git a/src/views/extensions/pagination/PaginationPositions.js b/src/views/extensions/pagination/PaginationPositions.js deleted file mode 100644 index 33b6457..0000000 --- a/src/views/extensions/pagination/PaginationPositions.js +++ /dev/null @@ -1,74 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, Row, Col } from 'reactstrap' -import ReactPaginate from 'react-paginate' - -const PaginationPositions = () => { - return ( - - - Positions - {' '} - - - -
Left Aligned
- - - -
Center Aligned
- - - -
Right Aligned
- - - - - - ) -} -export default PaginationPositions diff --git a/src/views/extensions/pagination/PaginationSizes.js b/src/views/extensions/pagination/PaginationSizes.js deleted file mode 100644 index f3f34ad..0000000 --- a/src/views/extensions/pagination/PaginationSizes.js +++ /dev/null @@ -1,71 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, Row, Col } from 'reactstrap' -import ReactPaginate from 'react-paginate' - -const PaginationSizes = () => { - return ( - - - Sizes - - - - - - - - - - - - - - - - ) -} -export default PaginationSizes diff --git a/src/views/extensions/pagination/PaginationSuccess.js b/src/views/extensions/pagination/PaginationSuccess.js deleted file mode 100644 index dac83b1..0000000 --- a/src/views/extensions/pagination/PaginationSuccess.js +++ /dev/null @@ -1,33 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPaginate from 'react-paginate' - -const PaginationSuccess = () => { - return ( - - - Success - - - - - - ) -} -export default PaginationSuccess diff --git a/src/views/extensions/pagination/PaginationWarning.js b/src/views/extensions/pagination/PaginationWarning.js deleted file mode 100644 index af97caf..0000000 --- a/src/views/extensions/pagination/PaginationWarning.js +++ /dev/null @@ -1,33 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPaginate from 'react-paginate' - -const PaginationWarning = () => { - return ( - - - Warning - - - - - - ) -} -export default PaginationWarning diff --git a/src/views/extensions/pagination/SepratedPagination.js b/src/views/extensions/pagination/SepratedPagination.js deleted file mode 100644 index d18ab71..0000000 --- a/src/views/extensions/pagination/SepratedPagination.js +++ /dev/null @@ -1,32 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPaginate from 'react-paginate' -const SeparatedPagination = () => { - return ( - - - Separated - - - - - - ) -} -export default SeparatedPagination diff --git a/src/views/extensions/pagination/index.js b/src/views/extensions/pagination/index.js deleted file mode 100644 index edf3c88..0000000 --- a/src/views/extensions/pagination/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import { Fragment } from 'react' -import ExtensionsHeader from '@components/extensions-header' -import { Row, Col } from 'reactstrap' -import BasicPagination from './BasicPagination' -import SepratedPagination from './SepratedPagination' -import PaginationIconText from './PaginationIconText' -import PaginationIcon from './PaginationIcon' -import PaginationSuccess from './PaginationSuccess' -import PaginationDanger from './PaginationDanger' -import PaginationInfo from './PaginationInfo' -import PaginationWarning from './PaginationWarning' -import PaginationPositions from './PaginationPositions' -import PaginationSizes from './PaginationSizes' - -const ReactPaginate = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default ReactPaginate diff --git a/src/views/extensions/ratings/RatingBasic.js b/src/views/extensions/ratings/RatingBasic.js deleted file mode 100644 index 571c2f0..0000000 --- a/src/views/extensions/ratings/RatingBasic.js +++ /dev/null @@ -1,23 +0,0 @@ -import Rating from 'react-rating' -import { Star } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const RatingBasic = ({ filledColor, dir }) => { - return ( - - - Basic - - - } - fullSymbol={} - initialRating={2} - direction={dir} - /> - - - ) -} - -export default RatingBasic diff --git a/src/views/extensions/ratings/RatingControlled.js b/src/views/extensions/ratings/RatingControlled.js deleted file mode 100644 index a2147f9..0000000 --- a/src/views/extensions/ratings/RatingControlled.js +++ /dev/null @@ -1,38 +0,0 @@ -import { useState } from 'react' -import Rating from 'react-rating' -import { Star } from 'react-feather' -import { Card, Button, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const RatingControlled = ({ filledColor, dir }) => { - const [value, setValue] = useState(0) - - return ( - - - Controlled Ratings - - - } - fullSymbol={} - initialRating={value} - onChange={e => setValue(e)} - direction={dir} - /> -
- - - -
- - - ) -} - -export default RatingControlled diff --git a/src/views/extensions/ratings/RatingCustomSvg.js b/src/views/extensions/ratings/RatingCustomSvg.js deleted file mode 100644 index 39998bc..0000000 --- a/src/views/extensions/ratings/RatingCustomSvg.js +++ /dev/null @@ -1,28 +0,0 @@ -import Rating from 'react-rating' -import { Sun, Cloud, CloudLightning, CloudSnow, CloudDrizzle } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const RatingCustomSvg = ({ emptyColor, dir }) => { - return ( - - - Custom SVG - - - } - fullSymbol={[ - , - , - , - - ]} - stop={4} - direction={dir} - /> - - - ) -} - -export default RatingCustomSvg diff --git a/src/views/extensions/ratings/RatingEvents.js b/src/views/extensions/ratings/RatingEvents.js deleted file mode 100644 index ec189a5..0000000 --- a/src/views/extensions/ratings/RatingEvents.js +++ /dev/null @@ -1,33 +0,0 @@ -import Rating from 'react-rating' -import { Star } from 'react-feather' -import RatingsHover from './RatingsHover' -import { Card, CardHeader, CardTitle, CardBody, CardText, Row, Col } from 'reactstrap' - -const RatingEvents = ({ filledColor, dir }) => { - return ( - - - Events - - - - - On Change - } - fullSymbol={} - onChange={rate => alert(rate)} - direction={dir} - /> - - - On Hover - - - - - - ) -} - -export default RatingEvents diff --git a/src/views/extensions/ratings/RatingFractional.js b/src/views/extensions/ratings/RatingFractional.js deleted file mode 100644 index b0c9185..0000000 --- a/src/views/extensions/ratings/RatingFractional.js +++ /dev/null @@ -1,24 +0,0 @@ -import Rating from 'react-rating' -import { Star } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const RatingFractional = ({ filledColor, dir }) => { - return ( - - - Fractional - - - } - fullSymbol={} - fractions={2} - initialRating={2.5} - direction={dir} - /> - - - ) -} - -export default RatingFractional diff --git a/src/views/extensions/ratings/RatingNumbers.js b/src/views/extensions/ratings/RatingNumbers.js deleted file mode 100644 index 2574bca..0000000 --- a/src/views/extensions/ratings/RatingNumbers.js +++ /dev/null @@ -1,23 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import Rating from 'react-rating' - -const RatingNumbers = props => { - return ( - - - Numbers - - - -} - fullSymbol={[1, 2, 3, 4, 5].map(n => ( - {n} - ))} - direction={props.dir} - /> - - - ) -} - -export default RatingNumbers diff --git a/src/views/extensions/ratings/RatingReadOnly.js b/src/views/extensions/ratings/RatingReadOnly.js deleted file mode 100644 index deacba8..0000000 --- a/src/views/extensions/ratings/RatingReadOnly.js +++ /dev/null @@ -1,24 +0,0 @@ -import Rating from 'react-rating' -import { Star } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const RatingReadOnly = ({ filledColor, dir }) => { - return ( - - - Readonly - - - } - fullSymbol={} - readonly - initialRating={2} - direction={dir} - /> - - - ) -} - -export default RatingReadOnly diff --git a/src/views/extensions/ratings/RatingSizes.js b/src/views/extensions/ratings/RatingSizes.js deleted file mode 100644 index 1329e99..0000000 --- a/src/views/extensions/ratings/RatingSizes.js +++ /dev/null @@ -1,35 +0,0 @@ -import Rating from 'react-rating' -import { Star } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const RatingSizes = ({ filledColor, dir }) => { - return ( - - - Sizes - - -
Large
- } - fullSymbol={} - /> -
Default
- } - fullSymbol={} - /> -
Small
- } - fullSymbol={} - /> - - - ) -} - -export default RatingSizes diff --git a/src/views/extensions/ratings/RatingsHover.js b/src/views/extensions/ratings/RatingsHover.js deleted file mode 100644 index b88bc8b..0000000 --- a/src/views/extensions/ratings/RatingsHover.js +++ /dev/null @@ -1,32 +0,0 @@ -import { useState, Fragment } from 'react' -import Rating from 'react-rating' -import { Star } from 'react-feather' - -const RatingsHover = ({ filledColor, dir }) => { - const [value, setValue] = useState(0) - - const onHover = rate => { - if (rate !== undefined) { - setValue(rate) - } - } - - return ( - - } - fullSymbol={} - onHover={rate => onHover(rate)} - onChange={rate => setValue(rate)} - direction={dir} - /> -
- Ratings: {value} -
- - ) -} - -export default RatingsHover diff --git a/src/views/extensions/ratings/index.js b/src/views/extensions/ratings/index.js deleted file mode 100644 index 3928889..0000000 --- a/src/views/extensions/ratings/index.js +++ /dev/null @@ -1,55 +0,0 @@ -import { Fragment, useContext } from 'react' -import { Row, Col } from 'reactstrap' -import { useRTL } from '@hooks/useRTL' -import RatingBasic from './RatingBasic' -import RatingSizes from './RatingSizes' -import RatingEvents from './RatingEvents' -import RatingNumbers from './RatingNumbers' -import RatingReadOnly from './RatingReadOnly' -import RatingCustomSvg from './RatingCustomSvg' -import RatingFractional from './RatingFractional' -import RatingControlled from './RatingControlled' -import ExtensionsHeader from '@components/extensions-header' -import { ThemeColors } from '@src/utility/context/ThemeColors' - -const Rating = () => { - const [isRtl, setIsRtl] = useRTL() - const themeColors = useContext(ThemeColors) - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default Rating diff --git a/src/views/extensions/react-player/MediaPlayerAudio.js b/src/views/extensions/react-player/MediaPlayerAudio.js deleted file mode 100644 index 6fc532d..0000000 --- a/src/views/extensions/react-player/MediaPlayerAudio.js +++ /dev/null @@ -1,186 +0,0 @@ -import { useState, useEffect, useRef } from 'react' -import { Card, CardTitle, CardHeader, CardBody, Row, Col, Table, Button, Progress, CustomInput } from 'reactstrap' -import Prism from 'prismjs' -import ReactPlayer from 'react-player' - -const pad = string => { - return `0${string}`.slice(-2) -} -const format = seconds => { - const date = new Date(seconds * 1000) - const hh = date.getUTCHours() - const mm = date.getUTCMinutes() - const ss = pad(date.getUTCSeconds()) - if (hh) { - return `${hh}:${pad(mm)}:${ss}` - } - return `${mm}:${ss}` -} - -const MediaPlayerAudio = () => { - useEffect(() => { - Prism.highlightAll() - }) - - const audioRef = useRef(null) - - const urlLink = 'https://soundcloud.com/2ghost/we-will-rock-you' - const [url, setUrl] = useState(urlLink) - const [playing, setPlaying] = useState(false) - const [volume, setVolume] = useState(0.75) - const [muted, setMuted] = useState(false) - const [played, setPlayed] = useState(0) - const [loaded, setLoaded] = useState(0) - const [duration, setDuration] = useState(0) - const [seeking, setSeeking] = useState(null) - - const load = url => { - setUrl(url) - setPlayed(0) - setLoaded(0) - } - const handlePlayPause = () => setPlaying(!playing) - const handleStop = () => { - setPlaying(false) - setUrl(null) - } - const handleVolumeChange = e => setVolume(parseFloat(e.target.value)) - const handleToggleMuted = () => setMuted(!muted) - const handlePlay = () => setPlaying(true) - const handlePause = () => setPlaying(false) - const handleSeekMouseDown = () => setSeeking(true) - const handleSeekChange = e => { - setPlayed(parseFloat(e.target.value)) - } - const handleSeekMouseUp = e => { - setSeeking(false) - audioRef.current.seekTo(parseFloat(e.target.value)) - } - const handleProgress = state => { - if (!seeking) { - setPlayed(state.played) - setLoaded(state.loaded) - } - } - const handleDuration = duration => setDuration(duration) - useEffect(() => { - if (url === null) { - load(urlLink) - } - }) - - // for duration, elapsed and remaining time - const Duration = ({ className, seconds }) => { - return ( - - ) - } - const preDuration = - const preElapsed = - const preRemaining = - - return ( - - - Audio - - - - - console.log('onSeek', e)} - onProgress={handleProgress} - onDuration={handleDuration} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Controls - - -
Seek - -
Volume - -
Muted - -
Played - -
Loaded - -
- - - 
-              
-                {`state={
-  playing: ${playing},
-  volume: ${volume.toFixed(2)},
-  played: ${played.toFixed(2)},
-  loaded: ${loaded.toFixed(2)},
-  duration: ${format(preDuration.props.seconds)},
-  elapsed: ${format(preElapsed.props.seconds)},
-  remaining: ${format(preRemaining.props.seconds)}
-}
-`}
-              
-
- - - - - ) -} - -export default MediaPlayerAudio diff --git a/src/views/extensions/react-player/MediaPlayerControlled.js b/src/views/extensions/react-player/MediaPlayerControlled.js deleted file mode 100644 index b6a66ec..0000000 --- a/src/views/extensions/react-player/MediaPlayerControlled.js +++ /dev/null @@ -1,256 +0,0 @@ -import { useState, useEffect, useRef } from 'react' -import { findDOMNode } from 'react-dom' -import { Card, CardTitle, CardHeader, CardBody, Row, Col, Table, Button, Progress, CustomInput } from 'reactstrap' -import Prism from 'prismjs' -import ReactPlayer from 'react-player' -import screenfull from 'screenfull' - -const pad = string => { - return `0${string}`.slice(-2) -} -const format = seconds => { - const date = new Date(seconds * 1000) - const hh = date.getUTCHours() - const mm = date.getUTCMinutes() - const ss = pad(date.getUTCSeconds()) - if (hh) { - return `${hh}:${pad(mm)}:${ss}` - } - return `${mm}:${ss}` -} - -const MediaPlayerControlledVideo = () => { - useEffect(() => { - Prism.highlightAll() - }) - - const videoRef = useRef(null) - - const urlLink = 'http://youtube.com/watch?v=FCPdIvXo2rU' - const [url, setUrl] = useState(urlLink) - const [playing, setPlaying] = useState(false) - const [controls, setControls] = useState(false) - const [volume, setVolume] = useState(0.75) - const [muted, setMuted] = useState(false) - const [played, setPlayed] = useState(0) - const [loaded, setLoaded] = useState(0) - const [duration, setDuration] = useState(0) - const [playbackRate, setPlaybackRate] = useState(1.0) - const [loop, setLoop] = useState(false) - const [seeking, setSeeking] = useState(null) - - const load = url => { - setUrl(url) - setPlayed(0) - setLoaded(0) - } - const handlePlayPause = () => setPlaying(!playing) - const handleStop = () => { - setPlaying(false) - setUrl(null) - } - const handleToggleControls = () => { - setControls(!controls) - setUrl(null) - } - useEffect(() => { - if (url === null) { - load(urlLink) - } - }) - const handleToggleLoop = () => setLoop(!loop) - const handleVolumeChange = e => setVolume(parseFloat(e.target.value)) - const handleToggleMuted = () => setMuted(!muted) - const handlePlaybackRate = e => setPlaybackRate(parseFloat(e.target.value)) - const handlePlay = () => setPlaying(true) - const handlePause = () => setPlaying(false) - const handleSeekMouseDown = () => setSeeking(true) - const handleSeekChange = e => { - setPlayed(parseFloat(e.target.value)) - } - const handleSeekMouseUp = e => { - setSeeking(false) - videoRef.current.seekTo(parseFloat(e.target.value)) - } - const handleProgress = state => { - if (!seeking) { - setPlayed(state.played) - setLoaded(state.loaded) - } - } - const handleEnded = () => setPlaying(loop) - const handleDuration = duration => setDuration(duration) - const handleFullscreen = () => { - screenfull.request(findDOMNode(videoRef.current)) - } - - // for duration, elapsed and remaining time - const Duration = ({ className, seconds }) => { - return ( - - ) - } - const preDuration = - const preElapsed = - const preRemaining = - - return ( - - - Controlled Video - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Controls - - - -
Speed - - - -
Seek - -
Volume - -
Controls - -
Muted - -
Loop - -
Played - -
Loaded - -
- - - - - 
-              
-                {`state={
-  playing: ${playing},
-  volume: ${volume.toFixed(2)},
-  played: ${played.toFixed(2)},
-  loaded: ${loaded.toFixed(2)},
-  duration: ${format(preDuration.props.seconds)},
-  elapsed: ${format(preElapsed.props.seconds)},
-  remaining: ${format(preRemaining.props.seconds)}
-}
-`}
-              
-
- - - - - ) -} - -export default MediaPlayerControlledVideo diff --git a/src/views/extensions/react-player/MediaPlayerVideo.js b/src/views/extensions/react-player/MediaPlayerVideo.js deleted file mode 100644 index 773b0b8..0000000 --- a/src/views/extensions/react-player/MediaPlayerVideo.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import ReactPlayer from 'react-player' - -const MediaPlayerVideo = () => { - return ( - - - Video - - - - - - ) -} - -export default MediaPlayerVideo diff --git a/src/views/extensions/react-player/index.js b/src/views/extensions/react-player/index.js deleted file mode 100644 index 38718e5..0000000 --- a/src/views/extensions/react-player/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import { Fragment } from 'react' -import { Row, Col } from 'reactstrap' -import MediaPlayerVideo from './MediaPlayerVideo' -import MediaPlayerAudio from './MediaPlayerAudio' -import MediaPlayerControlled from './MediaPlayerControlled' -import ExtensionsHeader from '@components/extensions-header' - -const ReactPlayer = () => { - return ( - - - - - - - - - - - - - - - ) -} - -export default ReactPlayer diff --git a/src/views/extensions/sliders/SliderBehaviour.js b/src/views/extensions/sliders/SliderBehaviour.js deleted file mode 100644 index e7932a9..0000000 --- a/src/views/extensions/sliders/SliderBehaviour.js +++ /dev/null @@ -1,60 +0,0 @@ -import Nouislider from 'nouislider-react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const SliderBehaviour = ({ direction }) => { - return ( - - - Slider Behaviour - - -
Tap
- -
Drag
- -
Fixed dragging
- -
Combined options
- - - - ) -} - -export default SliderBehaviour diff --git a/src/views/extensions/sliders/SliderColors.js b/src/views/extensions/sliders/SliderColors.js deleted file mode 100644 index 96d58a8..0000000 --- a/src/views/extensions/sliders/SliderColors.js +++ /dev/null @@ -1,51 +0,0 @@ -import Nouislider from 'nouislider-react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const SliderValues = ({ direction }) => { - const colorOptions = { - start: [40, 60], - connect: true, - behaviour: 'drag', - step: 10, - tooltips: true, - range: { - min: 0, - max: 100 - }, - pips: { - mode: 'steps', - stepped: true, - density: 5 - }, - direction - } - - return ( - - - Colors - - -
Default / Primary Color Slider
- - -
Secondary Color Slider
- - -
Success Color Slider
- - -
Danger Color Slider
- - -
warning Color Slider
- - -
info Color Slider
- - - - ) -} - -export default SliderValues diff --git a/src/views/extensions/sliders/SliderConnectUpper.js b/src/views/extensions/sliders/SliderConnectUpper.js deleted file mode 100644 index 807272e..0000000 --- a/src/views/extensions/sliders/SliderConnectUpper.js +++ /dev/null @@ -1,29 +0,0 @@ -import Nouislider from 'nouislider-react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const SliderConnectUpper = ({ direction }) => { - return ( - - - Connect to upper - - - - - - ) -} - -export default SliderConnectUpper diff --git a/src/views/extensions/sliders/SliderScalePips.js b/src/views/extensions/sliders/SliderScalePips.js deleted file mode 100644 index 6b656e4..0000000 --- a/src/views/extensions/sliders/SliderScalePips.js +++ /dev/null @@ -1,32 +0,0 @@ -import Nouislider from 'nouislider-react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const SliderScalePips = ({ direction }) => { - return ( - - - Slider Scales / Pips - - - - - - ) -} - -export default SliderScalePips diff --git a/src/views/extensions/sliders/SliderValues.js b/src/views/extensions/sliders/SliderValues.js deleted file mode 100644 index 20890a3..0000000 --- a/src/views/extensions/sliders/SliderValues.js +++ /dev/null @@ -1,34 +0,0 @@ -import Nouislider from 'nouislider-react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const SliderValues = ({ direction }) => { - return ( - - - Slider Values - - -
Handles
- -
Snapping between steps
- - - - ) -} - -export default SliderValues diff --git a/src/views/extensions/sliders/SliderVertical.js b/src/views/extensions/sliders/SliderVertical.js deleted file mode 100644 index c66312b..0000000 --- a/src/views/extensions/sliders/SliderVertical.js +++ /dev/null @@ -1,28 +0,0 @@ -import Nouislider from 'nouislider-react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const SliderVertical = ({ direction }) => { - return ( - - - Vertical Default - - - - - - ) -} - -export default SliderVertical diff --git a/src/views/extensions/sliders/SliderVerticalLimit.js b/src/views/extensions/sliders/SliderVerticalLimit.js deleted file mode 100644 index f41865a..0000000 --- a/src/views/extensions/sliders/SliderVerticalLimit.js +++ /dev/null @@ -1,31 +0,0 @@ -import Nouislider from 'nouislider-react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const SliderLimit = ({ direction }) => { - return ( - - - Limit - - - - - - ) -} - -export default SliderLimit diff --git a/src/views/extensions/sliders/SliderVerticalTooltips.js b/src/views/extensions/sliders/SliderVerticalTooltips.js deleted file mode 100644 index df4e4b3..0000000 --- a/src/views/extensions/sliders/SliderVerticalTooltips.js +++ /dev/null @@ -1,37 +0,0 @@ -import Nouislider from 'nouislider-react' -import wNumb from 'wnumb' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const SliderTooltips = ({ direction }) => { - return ( - - - Tooltips - - - - - - ) -} - -export default SliderTooltips diff --git a/src/views/extensions/sliders/SliderWithInput.js b/src/views/extensions/sliders/SliderWithInput.js deleted file mode 100644 index c00a973..0000000 --- a/src/views/extensions/sliders/SliderWithInput.js +++ /dev/null @@ -1,178 +0,0 @@ -import { useState } from 'react' -import Nouislider from 'nouislider-react' -import { Card, CardHeader, CardTitle, CardBody, Input, Row, Col } from 'reactstrap' - -const SliderWithInput = ({ direction }) => { - const [upperConnect, setUpperConnect] = useState(10) - const [lowerConnect, setLowerConnect] = useState(30.0) - - return ( - - - Slider With Input - - - - - - setUpperConnect(e.target.value)} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - setLowerConnect(e.target.value)} - /> - - - - - ) -} - -export default SliderWithInput diff --git a/src/views/extensions/sliders/SlidersBootstrap.js b/src/views/extensions/sliders/SlidersBootstrap.js deleted file mode 100644 index 5771823..0000000 --- a/src/views/extensions/sliders/SlidersBootstrap.js +++ /dev/null @@ -1,23 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, FormGroup, Input, Label } from 'reactstrap' - -const SlidersBootstrap = () => { - return ( - - - Default Bootstrap 4 slider - - - - - - - - - - - - - ) -} - -export default SlidersBootstrap diff --git a/src/views/extensions/sliders/index.js b/src/views/extensions/sliders/index.js deleted file mode 100644 index e2724e1..0000000 --- a/src/views/extensions/sliders/index.js +++ /dev/null @@ -1,67 +0,0 @@ -import { Fragment } from 'react' -import { Row, Col } from 'reactstrap' -import { useRTL } from '@hooks/useRTL' -import SliderColors from './SliderColors' -import SliderValues from './SliderValues' -import SliderVertical from './SliderVertical' -import SliderBehaviour from './SliderBehaviour' -import SliderScalePips from './SliderScalePips' -import SliderWithInput from './SliderWithInput' -import SliderBootstrap from './SlidersBootstrap' -import SliderConnectUpper from './SliderConnectUpper' -import SliderVerticalLimit from './SliderVerticalLimit' -import SliderVerticalTooltip from './SliderVerticalTooltips' -import ExtensionsHeader from '@components/extensions-header' - -import '@styles/react/libs/noui-slider/noui-slider.scss' - -const Slider = () => { - const [isRtl, setIsRtl] = useRTL() - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default Slider diff --git a/src/views/extensions/sweet-alert/SweetAlertAnimations.js b/src/views/extensions/sweet-alert/SweetAlertAnimations.js deleted file mode 100644 index 32977f3..0000000 --- a/src/views/extensions/sweet-alert/SweetAlertAnimations.js +++ /dev/null @@ -1,104 +0,0 @@ -import Swal from 'sweetalert2' -import withReactContent from 'sweetalert2-react-content' -import { Card, CardHeader, CardBody, CardTitle, Button, CardText } from 'reactstrap' - -const MySwal = withReactContent(Swal) - -const AnimatedSweetAlert = () => { - const handleBounceIn = () => { - return MySwal.fire({ - title: 'Bounce In Animation', - customClass: { - confirmButton: 'btn btn-primary' - }, - showClass: { - popup: 'animate__animated animate__bounceIn' - }, - buttonsStyling: false - }) - } - - const handleFadeIn = () => { - return MySwal.fire({ - title: 'Fade In Animation', - customClass: { - confirmButton: 'btn btn-primary' - }, - showClass: { - popup: 'animate__animated animate__fadeIn' - }, - buttonsStyling: false - }) - } - - const handleFlipIn = () => { - return MySwal.fire({ - title: 'Flip In Animation', - customClass: { - confirmButton: 'btn btn-primary' - }, - showClass: { - popup: 'animate__animated animate__flipInX' - }, - buttonsStyling: false - }) - } - - const handleTada = () => { - return MySwal.fire({ - title: 'Tada Animation', - customClass: { - confirmButton: 'btn btn-primary' - }, - showClass: { - popup: 'animate__animated animate__tada' - }, - buttonsStyling: false - }) - } - - const handleShake = () => { - return MySwal.fire({ - title: 'Shake Animation', - customClass: { - confirmButton: 'btn btn-primary' - }, - showClass: { - popup: 'animate__animated animate__shakeX' - }, - buttonsStyling: false - }) - } - - return ( - - - Animations - - - - Use popup inside showClass parameter to add animation to your alert. - -
- - - - - -
- - - ) -} - -export default AnimatedSweetAlert diff --git a/src/views/extensions/sweet-alert/SweetAlertBasic.js b/src/views/extensions/sweet-alert/SweetAlertBasic.js deleted file mode 100644 index ec5f54c..0000000 --- a/src/views/extensions/sweet-alert/SweetAlertBasic.js +++ /dev/null @@ -1,98 +0,0 @@ -import Swal from 'sweetalert2' -import { ThumbsUp, ThumbsDown } from 'react-feather' -import withReactContent from 'sweetalert2-react-content' -import { Card, CardHeader, CardBody, CardTitle, Button, CardText } from 'reactstrap' - -const MySwal = withReactContent(Swal) - -const BasicSweetAlert = () => { - const handleBasicTitleAlert = () => { - return MySwal.fire({ - title: 'Any fool can use a computer', - customClass: { - confirmButton: 'btn btn-primary' - }, - buttonsStyling: false - }) - } - - const handleTitleAlert = () => { - return MySwal.fire({ - title: 'The Internet?,', - text: 'That thing is still around?', - customClass: { - confirmButton: 'btn btn-primary' - }, - buttonsStyling: false - }) - } - - const handleFooterAlert = () => { - return MySwal.fire({ - icon: 'error', - title: 'Oops...', - text: 'Something went wrong!', - footer: 'Why do I have this issue?', - customClass: { - confirmButton: 'btn btn-primary' - }, - buttonsStyling: false - }) - } - - const handleHTMLAlert = () => { - return MySwal.fire({ - title: 'HTML example', - icon: 'info', - html: - 'You can use bold text, ' + - 'links ' + - 'and other HTML tags', - showCloseButton: true, - showCancelButton: true, - focusConfirm: false, - confirmButtonText: ( - - - Great! - - ), - cancelButtonText: , - customClass: { - confirmButton: 'btn btn-primary', - cancelButton: 'btn btn-outline-danger ml-1' - }, - buttonsStyling: false - }) - } - - return ( - - - Basic - - - - SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop - computer, mobile or tablet. It's even highly customizable, as you can see below! - -
- - - - -
- - - ) -} - -export default BasicSweetAlert diff --git a/src/views/extensions/sweet-alert/SweetAlertCallback.js b/src/views/extensions/sweet-alert/SweetAlertCallback.js deleted file mode 100644 index dcc8425..0000000 --- a/src/views/extensions/sweet-alert/SweetAlertCallback.js +++ /dev/null @@ -1,95 +0,0 @@ -import { Card, CardHeader, CardBody, CardTitle, Button, Row, Col } from 'reactstrap' -import Swal from 'sweetalert2' -import withReactContent from 'sweetalert2-react-content' - -const MySwal = withReactContent(Swal) - -const BasicSweetCallback = () => { - const handleConfirmText = () => { - return MySwal.fire({ - title: 'Are you sure?', - text: "You won't be able to revert this!", - icon: 'warning', - showCancelButton: true, - confirmButtonText: 'Yes, delete it!', - customClass: { - confirmButton: 'btn btn-primary', - cancelButton: 'btn btn-outline-danger ml-1' - }, - buttonsStyling: false - }).then(function (result) { - if (result.value) { - MySwal.fire({ - icon: 'success', - title: 'Deleted!', - text: 'Your file has been deleted.', - customClass: { - confirmButton: 'btn btn-success' - } - }) - } - }) - } - - const handleConfirmCancel = () => { - return MySwal.fire({ - title: 'Are you sure?', - text: "You won't be able to revert this!", - icon: 'warning', - showCancelButton: true, - confirmButtonText: 'Yes, delete it!', - customClass: { - confirmButton: 'btn btn-primary', - cancelButton: 'btn btn-danger ml-1' - }, - buttonsStyling: false - }).then(function (result) { - if (result.value) { - MySwal.fire({ - icon: 'success', - title: 'Deleted!', - text: 'Your file has been deleted.', - customClass: { - confirmButton: 'btn btn-success' - } - }) - } else if (result.dismiss === MySwal.DismissReason.cancel) { - MySwal.fire({ - title: 'Cancelled', - text: 'Your imaginary file is safe :)', - icon: 'error', - customClass: { - confirmButton: 'btn btn-success' - } - }) - } - }) - } - - return ( - - - Callback - - - - -
Confirm Button Text
- - - - -
Confirm Button Color
- - - - - - ) -} - -export default BasicSweetCallback diff --git a/src/views/extensions/sweet-alert/SweetAlertOptions.js b/src/views/extensions/sweet-alert/SweetAlertOptions.js deleted file mode 100644 index f5f47d4..0000000 --- a/src/views/extensions/sweet-alert/SweetAlertOptions.js +++ /dev/null @@ -1,147 +0,0 @@ -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' -import Swal from 'sweetalert2' -import withReactContent from 'sweetalert2-react-content' -import alertImg from '@src/assets/images/slider/04.jpg' - -const MySwal = withReactContent(Swal) - -const SweetAlertOptions = () => { - const handleImageAlert = () => { - return MySwal.fire({ - title: 'Sweet!', - text: 'Modal with a custom image.', - imageUrl: alertImg, - imageWidth: 400, - imageHeight: 200, - imageAlt: 'Custom image', - customClass: { confirmButton: 'btn btn-primary' }, - buttonsStyling: false - }) - } - - const handleTimeoutAlert = () => { - let timerInterval - Swal.fire({ - title: 'Auto close alert!', - html: 'I will close in seconds.', - timer: 2000, - onBeforeOpen() { - Swal.showLoading() - timerInterval = setInterval(function () { - Swal.getContent().querySelector('strong').textContent = Swal.getTimerLeft() - }, 100) - }, - onClose() { - clearInterval(timerInterval) - } - }).then(function (result) { - if (result.dismiss === Swal.DismissReason.timer) { - console.log('I was closed by the timer') - } - }) - } - - const handleClickOutside = () => { - return MySwal.fire({ - title: 'Click outside to close!', - text: 'This is a cool message!', - allowOutsideClick: true, - customClass: { confirmButton: 'btn btn-primary' }, - buttonsStyling: false - }) - } - - const handleQuestions = () => { - return MySwal.mixin({ - input: 'text', - confirmButtonText: 'Next →', - showCancelButton: true, - progressSteps: ['1', '2', '3'], - buttonsStyling: false, - customClass: { - confirmButton: 'btn btn-primary', - cancelButton: 'btn btn-danger ml-1' - } - }) - .queue(['Question 1', 'Question 2', 'Question 3']) - .then(function (result) { - if (result.value) { - MySwal.fire({ - title: 'All done!', - html: `Your answers: 
${JSON.stringify(result.value)}
`, - confirmButtonText: 'Lovely!', - customClass: { confirmButton: 'btn btn-primary' } - }) - } - }) - } - - const handleAjax = () => { - MySwal.fire({ - title: 'Search for a user', - input: 'text', - customClass: { - confirmButton: 'btn btn-primary', - cancelButton: 'btn btn-danger ml-1' - }, - buttonsStyling: false, - inputAttributes: { - autocapitalize: 'off' - }, - showCancelButton: true, - confirmButtonText: 'Look up', - showLoaderOnConfirm: true, - preConfirm(login) { - return fetch(`//api.github.com/users/${login}`) - .then(function (response) { - if (!response.ok) { - throw new Error(response.statusText) - } - return response.json() - }) - .catch(function (error) { - MySwal.showValidationMessage(`Request failed: ${error}`) - }) - } - }).then(function (result) { - if (result.value) { - MySwal.fire({ - title: `${result.value.login}'s avatar`, - imageUrl: result.value.avatar_url, - customClass: { - confirmButton: 'btn btn-primary' - } - }) - } - }) - } - - return ( - - - Options - - -
- - - - - -
- - - ) -} - -export default SweetAlertOptions diff --git a/src/views/extensions/sweet-alert/SweetAlertPositions.js b/src/views/extensions/sweet-alert/SweetAlertPositions.js deleted file mode 100644 index b4cea37..0000000 --- a/src/views/extensions/sweet-alert/SweetAlertPositions.js +++ /dev/null @@ -1,80 +0,0 @@ -import { Card, CardHeader, CardBody, CardTitle, Button, CardText } from 'reactstrap' -import Swal from 'sweetalert2' -import withReactContent from 'sweetalert2-react-content' - -const MySwal = withReactContent(Swal) - -const SweetAlertPositions = () => { - const handleTopStart = () => { - return MySwal.fire({ - position: 'top-start', - icon: 'success', - title: 'Your work has been saved', - showConfirmButton: false, - timer: 1500 - }) - } - - const handleTopEnd = () => { - return MySwal.fire({ - position: 'top-end', - icon: 'success', - title: 'Your work has been saved', - showConfirmButton: false, - timer: 1500 - }) - } - - const handleBottomStart = () => { - return MySwal.fire({ - position: 'bottom-start', - icon: 'success', - title: 'Your work has been saved', - showConfirmButton: false, - timer: 1500 - }) - } - - const handleBottomEnd = () => { - return MySwal.fire({ - position: 'bottom-end', - icon: 'success', - title: 'Your work has been saved', - showConfirmButton: false, - timer: 1500 - }) - } - - return ( - - - Position - - - - You can specify position of your alert with - {'position : top-start | top-end | bottom-start | bottom-end '}{' '} - -
- - - - - - - -
- - - ) -} - -export default SweetAlertPositions diff --git a/src/views/extensions/sweet-alert/SweetAlertTypes.js b/src/views/extensions/sweet-alert/SweetAlertTypes.js deleted file mode 100644 index 5d2bcad..0000000 --- a/src/views/extensions/sweet-alert/SweetAlertTypes.js +++ /dev/null @@ -1,85 +0,0 @@ -import { Card, CardHeader, CardBody, CardTitle, Button, CardText } from 'reactstrap' -import Swal from 'sweetalert2' -import withReactContent from 'sweetalert2-react-content' - -const MySwal = withReactContent(Swal) - -const SweetAlertTypes = () => { - const handleSuccess = () => { - return MySwal.fire({ - title: 'Good job!', - text: 'You clicked the button!', - icon: 'success', - customClass: { - confirmButton: 'btn btn-primary' - }, - buttonsStyling: false - }) - } - - const handleInfo = () => { - return MySwal.fire({ - title: 'Info!', - text: 'You clicked the button!', - icon: 'info', - customClass: { - confirmButton: 'btn btn-primary' - }, - buttonsStyling: false - }) - } - - const handleWarning = () => { - return MySwal.fire({ - title: 'Warning!', - text: ' You clicked the button!', - icon: 'warning', - customClass: { - confirmButton: 'btn btn-primary' - }, - buttonsStyling: false - }) - } - - const handleError = () => { - return MySwal.fire({ - title: 'Error!', - text: ' You clicked the button!', - icon: 'error', - customClass: { - confirmButton: 'btn btn-primary' - }, - buttonsStyling: false - }) - } - - return ( - - - Types - - - - SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", - "success" and "info". - -
- - - - -
- - - ) -} - -export default SweetAlertTypes diff --git a/src/views/extensions/sweet-alert/index.js b/src/views/extensions/sweet-alert/index.js deleted file mode 100644 index 458c69c..0000000 --- a/src/views/extensions/sweet-alert/index.js +++ /dev/null @@ -1,46 +0,0 @@ -import { Fragment } from 'react' -import ExtensionsHeader from '@components/extensions-header' -import { Row, Col } from 'reactstrap' -import SweetAlertBasic from './SweetAlertBasic' -import SweetAlertPositions from './SweetAlertPositions' -import SweetAlertAnimations from './SweetAlertAnimations' -import SweetAlertTypes from './SweetAlertTypes' -import SweetAlertOptions from './SweetAlertOptions' -import SweetAlertCallback from './SweetAlertCallback' - -import 'animate.css/animate.css' -import '@styles/base/plugins/extensions/ext-component-sweet-alerts.scss' - -const SweetAlert = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default SweetAlert diff --git a/src/views/extensions/swiper/3DEffect.js b/src/views/extensions/swiper/3DEffect.js deleted file mode 100644 index d6e8736..0000000 --- a/src/views/extensions/swiper/3DEffect.js +++ /dev/null @@ -1,45 +0,0 @@ -import SwiperCore, { EffectCube, Pagination } from 'swiper' -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-21.jpg' -import img2 from '@src/assets/images/banner/banner-22.jpg' -import img3 from '@src/assets/images/banner/banner-23.jpg' -import img4 from '@src/assets/images/banner/banner-24.jpg' - -const params = { - effect: 'cube', - className: 'swiper-cube-effect', - pagination: { - clickable: true - } -} - -SwiperCore.use([EffectCube, Pagination]) - -const SwiperThreeD = ({ isRtl }) => { - return ( - - - 3D Cube Effect - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - - - ) -} - -export default SwiperThreeD diff --git a/src/views/extensions/swiper/CenteredSlidesStyle1.js b/src/views/extensions/swiper/CenteredSlidesStyle1.js deleted file mode 100644 index 475c30d..0000000 --- a/src/views/extensions/swiper/CenteredSlidesStyle1.js +++ /dev/null @@ -1,48 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import { Play, DollarSign, HelpCircle, FileText, Archive } from 'react-feather' - -const SwiperCenterSlidesStyle = ({ isRtl }) => { - const params = { - className: 'swiper-centered-slides p-1', - slidesPerView: 'auto', - spaceBetween: 30, - centeredSlides: true, - navigation: true, - slideToClickedSlide: true - } - - return ( - - - Centered Slides option-1 - - - - - -

Getting Started

- - - -

Pricing & Plans

- - - -

Sales Questions

- - - -

User Guides

- - - -

General Guides

- - - - - ) -} - -export default SwiperCenterSlidesStyle diff --git a/src/views/extensions/swiper/CenteredSlidesStyle2.js b/src/views/extensions/swiper/CenteredSlidesStyle2.js deleted file mode 100644 index 6373aab..0000000 --- a/src/views/extensions/swiper/CenteredSlidesStyle2.js +++ /dev/null @@ -1,47 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import { Play, DollarSign, HelpCircle, FileText, Archive } from 'react-feather' - -const SwiperCenterSlidesStyle = ({ isRtl }) => { - const params = { - className: 'swiper-centered-slides-2 p-1', - slidesPerView: 'auto', - spaceBetween: 30, - centeredSlides: true, - slideToClickedSlide: true - } - - return ( - - - Centered Slides option-2 - - - - - - Getting Started - - - - Pricing & Plans - - - - Sales Questions - - - - User Guides - - - - General Guides - - - - - ) -} - -export default SwiperCenterSlidesStyle diff --git a/src/views/extensions/swiper/SwiperAutoplay.js b/src/views/extensions/swiper/SwiperAutoplay.js deleted file mode 100644 index 6ac9b9f..0000000 --- a/src/views/extensions/swiper/SwiperAutoplay.js +++ /dev/null @@ -1,55 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-20.jpg' -import img2 from '@src/assets/images/banner/banner-7.jpg' -import img3 from '@src/assets/images/banner/banner-8.jpg' -import img4 from '@src/assets/images/banner/banner-9.jpg' -import img5 from '@src/assets/images/banner/banner-10.jpg' -import img6 from '@src/assets/images/banner/banner-11.jpg' - -const params = { - spaceBetween: 30, - centeredSlides: true, - autoplay: { - delay: 2500, - disableOnInteraction: false - }, - pagination: { - clickable: true - }, - navigation: true -} - -const SwiperAutoplay = ({ isRtl }) => { - return ( - - - Autoplay - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - swiper 6 - - - - - ) -} - -export default SwiperAutoplay diff --git a/src/views/extensions/swiper/SwiperCoverflow.js b/src/views/extensions/swiper/SwiperCoverflow.js deleted file mode 100644 index b43ea33..0000000 --- a/src/views/extensions/swiper/SwiperCoverflow.js +++ /dev/null @@ -1,71 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-35.jpg' -import img2 from '@src/assets/images/banner/banner-39.jpg' -import img3 from '@src/assets/images/banner/banner-38.jpg' -import img4 from '@src/assets/images/banner/banner-37.jpg' -import img5 from '@src/assets/images/banner/banner-36.jpg' -import img6 from '@src/assets/images/banner/banner-34.jpg' -import img7 from '@src/assets/images/banner/banner-33.jpg' -import img8 from '@src/assets/images/banner/banner-32.jpg' -import img9 from '@src/assets/images/banner/banner-31.jpg' - -const params = { - effect: 'coverflow', - className: 'swiper-coverflow', - slidesPerView: 'auto', - centeredSlides: true, - pagination: { - clickable: true - }, - coverflowEffect: { - rotate: 50, - stretch: 0, - depth: 100, - modifier: 1, - slideShadows: true - } -} - -const SwiperFade = ({ isRtl }) => { - return ( - - - 3d Effect Coverflow Effect - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - swiper 6 - - - swiper 7 - - - swiper 8 - - - swiper 9 - - - - - ) -} - -export default SwiperFade diff --git a/src/views/extensions/swiper/SwiperDefault.js b/src/views/extensions/swiper/SwiperDefault.js deleted file mode 100644 index b392271..0000000 --- a/src/views/extensions/swiper/SwiperDefault.js +++ /dev/null @@ -1,38 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-1.jpg' -import img2 from '@src/assets/images/banner/banner-2.jpg' -import img3 from '@src/assets/images/banner/banner-4.jpg' -import img4 from '@src/assets/images/banner/banner-13.jpg' -import img5 from '@src/assets/images/banner/banner-7.jpg' - -const SwiperDefault = ({ isRtl }) => { - return ( - - - Default - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - - - ) -} - -export default SwiperDefault diff --git a/src/views/extensions/swiper/SwiperFade.js b/src/views/extensions/swiper/SwiperFade.js deleted file mode 100644 index c37f585..0000000 --- a/src/views/extensions/swiper/SwiperFade.js +++ /dev/null @@ -1,46 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-20.jpg' -import img2 from '@src/assets/images/banner/banner-19.jpg' -import img3 from '@src/assets/images/banner/banner-18.jpg' -import img4 from '@src/assets/images/banner/banner-17.jpg' -import img5 from '@src/assets/images/banner/banner-16.jpg' - -const params = { - effect: 'fade', - navigation: true, - pagination: { - clickable: true - } -} - -const SwiperFade = () => { - return ( - - - Fade - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - - - ) -} - -export default SwiperFade diff --git a/src/views/extensions/swiper/SwiperGallery.js b/src/views/extensions/swiper/SwiperGallery.js deleted file mode 100644 index 19f9233..0000000 --- a/src/views/extensions/swiper/SwiperGallery.js +++ /dev/null @@ -1,83 +0,0 @@ -import { useState } from 'react' -import SwiperCore, { Thumbs } from 'swiper' -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-11.jpg' -import img2 from '@src/assets/images/banner/banner-12.jpg' -import img3 from '@src/assets/images/banner/banner-13.jpg' -import img4 from '@src/assets/images/banner/banner-14.jpg' -import img5 from '@src/assets/images/banner/banner-15.jpg' - -SwiperCore.use([Thumbs]) - -const SwiperGallery = ({ isRtl }) => { - const [thumbsSwiper, setThumbsSwiper] = useState(null) - - const params = { - className: 'swiper-gallery', - spaceBetween: 10, - navigation: true, - pagination: { - clickable: true - }, - thumbs: { swiper: thumbsSwiper } - } - - const paramsThumbs = { - className: 'gallery-thumbs', - spaceBetween: 10, - slidesPerView: 4, - freeMode: true, - watchSlidesVisibility: true, - watchSlidesProgress: true, - onSwiper: setThumbsSwiper - } - - return ( - - - Gallery - - -
- - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - -
- - - ) -} - -export default SwiperGallery diff --git a/src/views/extensions/swiper/SwiperLazyload.js b/src/views/extensions/swiper/SwiperLazyload.js deleted file mode 100644 index f11f2f6..0000000 --- a/src/views/extensions/swiper/SwiperLazyload.js +++ /dev/null @@ -1,56 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-9.jpg' -import img2 from '@src/assets/images/banner/banner-8.jpg' -import img3 from '@src/assets/images/banner/banner-7.jpg' -import img4 from '@src/assets/images/banner/banner-20.jpg' -import img5 from '@src/assets/images/banner/banner-5.jpg' -import img6 from '@src/assets/images/banner/banner-4.jpg' - -const params = { - lazy: true, - navigation: true, - pagination: { - clickable: true - } -} - -const SwiperLazyLoad = ({ isRtl }) => { - return ( - - - Lazy Loading - - - - - swiper 1 -
- - - swiper 2 -
- - - swiper 3 -
- - - swiper 4 -
- - - swiper 5 -
- - - swiper 6 -
- - - - - ) -} - -export default SwiperLazyLoad diff --git a/src/views/extensions/swiper/SwiperMultiSlides.js b/src/views/extensions/swiper/SwiperMultiSlides.js deleted file mode 100644 index 216bc51..0000000 --- a/src/views/extensions/swiper/SwiperMultiSlides.js +++ /dev/null @@ -1,46 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-31.jpg' -import img2 from '@src/assets/images/banner/banner-32.jpg' -import img3 from '@src/assets/images/banner/banner-33.jpg' -import img4 from '@src/assets/images/banner/banner-34.jpg' -import img5 from '@src/assets/images/banner/banner-35.jpg' - -const params = { - slidesPerView: 3, - spaceBetween: 30, - pagination: { - clickable: true - } -} - -const SwiperMultiSlides = () => { - return ( - - - Multi Slides Per View - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - - - ) -} - -export default SwiperMultiSlides diff --git a/src/views/extensions/swiper/SwiperNavigation.js b/src/views/extensions/swiper/SwiperNavigation.js deleted file mode 100644 index f78dc67..0000000 --- a/src/views/extensions/swiper/SwiperNavigation.js +++ /dev/null @@ -1,42 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-7.jpg' -import img2 from '@src/assets/images/banner/banner-4.jpg' -import img3 from '@src/assets/images/banner/banner-14.jpg' -import img4 from '@src/assets/images/banner/banner-3.jpg' -import img5 from '@src/assets/images/banner/banner-2.jpg' - -const params = { - navigation: true -} - -const SwiperNavigation = ({ isRtl }) => { - return ( - - - Navigation - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - - - ) -} - -export default SwiperNavigation diff --git a/src/views/extensions/swiper/SwiperPagination.js b/src/views/extensions/swiper/SwiperPagination.js deleted file mode 100644 index e30b956..0000000 --- a/src/views/extensions/swiper/SwiperPagination.js +++ /dev/null @@ -1,44 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-12.jpg' -import img2 from '@src/assets/images/banner/banner-9.jpg' -import img3 from '@src/assets/images/banner/banner-8.jpg' -import img4 from '@src/assets/images/banner/banner-7.jpg' -import img5 from '@src/assets/images/banner/banner-20.jpg' - -const params = { - pagination: { - clickable: true - } -} - -const SwiperPagination = ({ isRtl }) => { - return ( - - - Pagination - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - - - ) -} - -export default SwiperPagination diff --git a/src/views/extensions/swiper/SwiperProgress.js b/src/views/extensions/swiper/SwiperProgress.js deleted file mode 100644 index 16f2c2f..0000000 --- a/src/views/extensions/swiper/SwiperProgress.js +++ /dev/null @@ -1,45 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-8.jpg' -import img2 from '@src/assets/images/banner/banner-7.jpg' -import img3 from '@src/assets/images/banner/banner-20.jpg' -import img4 from '@src/assets/images/banner/banner-5.jpg' -import img5 from '@src/assets/images/banner/banner-4.jpg' - -const params = { - navigation: true, - pagination: { - type: 'progressbar' - } -} - -const SwiperProgress = () => { - return ( - - - Progress - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - - - ) -} - -export default SwiperProgress diff --git a/src/views/extensions/swiper/SwiperResponsive.js b/src/views/extensions/swiper/SwiperResponsive.js deleted file mode 100644 index 094c598..0000000 --- a/src/views/extensions/swiper/SwiperResponsive.js +++ /dev/null @@ -1,80 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-30.jpg' -import img2 from '@src/assets/images/banner/banner-31.jpg' -import img3 from '@src/assets/images/banner/banner-32.jpg' -import img4 from '@src/assets/images/banner/banner-33.jpg' -import img5 from '@src/assets/images/banner/banner-34.jpg' -import img6 from '@src/assets/images/banner/banner-35.jpg' -import img7 from '@src/assets/images/banner/banner-36.jpg' -import img8 from '@src/assets/images/banner/banner-37.jpg' -import img9 from '@src/assets/images/banner/banner-38.jpg' - -const params = { - slidesPerView: 5, - spaceBetween: 50, - pagination: { - clickable: true - }, - breakpoints: { - 1024: { - slidesPerView: 4, - spaceBetween: 40 - }, - 768: { - slidesPerView: 3, - spaceBetween: 30 - }, - 640: { - slidesPerView: 2, - spaceBetween: 20 - }, - 320: { - slidesPerView: 1, - spaceBetween: 10 - } - } -} - -const SwiperResponsive = ({ isRtl }) => { - return ( - - - Responsive - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - swiper 6 - - - swiper 7 - - - swiper 8 - - - swiper 9 - - - - - ) -} - -export default SwiperResponsive diff --git a/src/views/extensions/swiper/SwiperRows.js b/src/views/extensions/swiper/SwiperRows.js deleted file mode 100644 index c51444d..0000000 --- a/src/views/extensions/swiper/SwiperRows.js +++ /dev/null @@ -1,68 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react' -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import img1 from '@src/assets/images/banner/banner-26.jpg' -import img2 from '@src/assets/images/banner/banner-39.jpg' -import img3 from '@src/assets/images/banner/banner-28.jpg' -import img4 from '@src/assets/images/banner/banner-29.jpg' -import img5 from '@src/assets/images/banner/banner-30.jpg' -import img6 from '@src/assets/images/banner/banner-31.jpg' -import img7 from '@src/assets/images/banner/banner-32.jpg' -import img8 from '@src/assets/images/banner/banner-33.jpg' -import img9 from '@src/assets/images/banner/banner-34.jpg' -import img10 from '@src/assets/images/banner/banner-35.jpg' - -const params = { - slidesPerView: 3, - slidesPerColumn: 2, - spaceBetween: 30, - slidesPerColumnFill: 'row', - pagination: { - clickable: true - } -} - -const SwiperMultiSlides = ({ isRtl }) => { - return ( - - - Multi Row Slides Layout - - - - - swiper 1 - - - swiper 2 - - - swiper 3 - - - swiper 4 - - - swiper 5 - - - swiper 6 - - - swiper 7 - - - swiper 8 - - - swiper 9 - - - swiper 10 - - - - - ) -} - -export default SwiperMultiSlides diff --git a/src/views/extensions/swiper/SwiperVirtual.js b/src/views/extensions/swiper/SwiperVirtual.js deleted file mode 100644 index 0276c48..0000000 --- a/src/views/extensions/swiper/SwiperVirtual.js +++ /dev/null @@ -1,58 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, Button } from 'reactstrap' -import { Swiper, SwiperSlide } from 'swiper/react' - -const SwiperVirtual = ({ isRtl }) => { - const slides = [] - for (let i = 0; i < 10; i += 1) { - slides.push(Slide {i + 1}) - } - - let instance = null - - const appendSlide = () => { - if (instance !== null) { - slides.push(Slide {slides.length + 1}) - instance.update(true) - } - } - - const removeSlide = () => { - if (instance !== null) { - instance.removeAllSlides() - slides.length = 0 - } - } - - return ( - - - Virtual - - - (instance = swiper.virtual)} - virtual - > - {slides} - - -
- - -
- - - ) -} - -export default SwiperVirtual diff --git a/src/views/extensions/swiper/index.js b/src/views/extensions/swiper/index.js deleted file mode 100644 index c45aaa6..0000000 --- a/src/views/extensions/swiper/index.js +++ /dev/null @@ -1,100 +0,0 @@ -import { Fragment } from 'react' -import { useRTL } from '@hooks/useRTL' -import SwiperCore, { - Navigation, - Pagination, - EffectFade, - EffectCube, - EffectCoverflow, - Autoplay, - Lazy, - Virtual -} from 'swiper' -import SwiperDefault from './SwiperDefault' -import SwiperNavigation from './SwiperNavigation' -import SwiperPagination from './SwiperPagination' -import SwiperProgress from './SwiperProgress' -import SwiperMultiSlides from './SwiperMultiSlides' -import SwiperRows from './SwiperRows' -import CenterSlidesStyle1 from './CenteredSlidesStyle1' -import CenterSlidesStyle2 from './CenteredSlidesStyle2' -import SwiperFade from './SwiperFade' -import SwiperCube from './3DEffect' -import SwiperCoverflow from './SwiperCoverflow' -import SwiperAutoplay from './SwiperAutoplay' -import SwiperGallery from './SwiperGallery' -import SwiperLazy from './SwiperLazyload' -import SwiperResponsive from './SwiperResponsive' -import SwiperVirtual from './SwiperVirtual' -import ExtensionsHeader from '@components/extensions-header' -import { Row, Col } from 'reactstrap' - -import '@styles/react/libs/swiper/swiper.scss' - -SwiperCore.use([Navigation, Pagination, EffectFade, EffectCube, EffectCoverflow, Autoplay, Lazy, Virtual]) - -const Slider = () => { - const [isRtl, setIsRtl] = useRTL() - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default Slider diff --git a/src/views/extensions/toastify/ToastPositions.js b/src/views/extensions/toastify/ToastPositions.js deleted file mode 100644 index ae49693..0000000 --- a/src/views/extensions/toastify/ToastPositions.js +++ /dev/null @@ -1,92 +0,0 @@ -import { Fragment } from 'react' -import { Info } from 'react-feather' -import { toast } from 'react-toastify' -import Avatar from '@components/avatar' -import { Card, CardHeader, CardBody, CardTitle, Button, Row, Col } from 'reactstrap' - -const InfoToast = ({ title }) => ( - -
-
- } /> -
{title}
-
- 11 Min Ago -
-
- I do not think that word means what you think it means. -
- -) - -const ToastPositions = () => { - const notifyTopLeft = () => toast.info(, { - position: toast.POSITION.TOP_LEFT, - hideProgressBar: true - }) - const notifyTopCenter = () => toast.info(, { - position: toast.POSITION.TOP_CENTER, - hideProgressBar: true - }) - const notifyTopRight = () => toast.info(, { - position: toast.POSITION.TOP_RIGHT, - hideProgressBar: true - }) - - const notifyBottomLeft = () => toast.info(, { - position: toast.POSITION.BOTTOM_LEFT, - hideProgressBar: true - }) - const notifyBottomCenter = () => toast.info(, { - position: toast.POSITION.BOTTOM_CENTER, - hideProgressBar: true - }) - const notifyBottomRight = () => toast.info(, { - position: toast.POSITION.BOTTOM_RIGHT, - hideProgressBar: true - }) - - return ( - - - Positions - - - - -
Top Positions
-
- - Top Left - - - Top Center - - - Top Right - -
- - -
Bottom Positions
-
- - Bottom Left - - - - Bottom Center - - - - Bottom Right - -
- - - - - ) -} - -export default ToastPositions diff --git a/src/views/extensions/toastify/ToastTypes.js b/src/views/extensions/toastify/ToastTypes.js deleted file mode 100644 index 5f64a60..0000000 --- a/src/views/extensions/toastify/ToastTypes.js +++ /dev/null @@ -1,148 +0,0 @@ -import { Fragment } from 'react' -import { toast } from 'react-toastify' -import Avatar from '@components/avatar' -import { Bell, Check, X, AlertTriangle, Info } from 'react-feather' -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' - -const PrimaryToast = () => ( - -
-
- } /> -
Default!
-
- 11 Min Ago -
-
- - 👋 Jelly-o macaroon brownie tart ice cream croissant jelly-o apple pie. - -
- -) - -const SuccessToast = () => ( - -
-
- } /> -
Success!
-
- 11 Min Ago -
-
- - 👋 Jelly-o macaroon brownie tart ice cream croissant jelly-o apple pie. - -
- -) - -const ErrorToast = () => ( - -
-
- } /> -
Error!
-
- 11 Min Ago -
-
- - 👋 Jelly-o macaroon brownie tart ice cream croissant jelly-o apple pie. - -
- -) - -const WarningToast = () => ( - -
-
- } /> -
Warning!
-
- 11 Min Ago -
-
- - 👋 Jelly-o macaroon brownie tart ice cream croissant jelly-o apple pie. - -
- -) - -const InfoToast = () => ( - -
-
- } /> -
Info!
-
- 11 Min Ago -
-
- - 👋 Jelly-o macaroon brownie tart ice cream croissant jelly-o apple pie. - -
- -) - -const SuccessProgressToast = () => ( - -
-
- } /> -
Progress Bar!
-
- 11 Min Ago -
-
- - 👋 Jelly-o macaroon brownie tart ice cream croissant jelly-o apple pie. - -
- -) - -const ToastTypes = () => { - const notifyDefault = () => toast(, { hideProgressBar: true }) - const notifySuccess = () => toast.success(, { hideProgressBar: true }) - const notifyError = () => toast.error(, { hideProgressBar: true }) - const notifyWarning = () => toast.warning(, { hideProgressBar: true }) - const notifyInfo = () => toast.info(, { hideProgressBar: true }) - const notifySuccessProgress = () => toast.success() - - return ( - - - Types - - -
- - Default - - - Success - - - Error - - - Warning - - - Info - - - Success Progress Bar - -
- - - ) -} - -export default ToastTypes diff --git a/src/views/extensions/toastify/ToastifyOptions.js b/src/views/extensions/toastify/ToastifyOptions.js deleted file mode 100644 index 8c55f20..0000000 --- a/src/views/extensions/toastify/ToastifyOptions.js +++ /dev/null @@ -1,81 +0,0 @@ -import { Fragment } from 'react' -import Avatar from '@components/avatar' -import { X, Loader, Info } from 'react-feather' -import { toast } from 'react-toastify' -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' - -const ErrorToast = () => ( - -
-
- } /> -
Delayed
-
- 11 Min Ago -
-
- Candy jelly-o apple pie chocolate bar croissant gummies tiramisu macaroon. -
- -) - -const AutoCloseToast = () => ( - -
-
- } /> -
Auto Close
-
- 11 Min Ago -
-
- Candy jelly-o apple pie chocolate bar croissant gummies tiramisu macaroon. -
- -) - -const InfoToast = () => ( - -
-
- } /> -
Sticky Toast!
-
- 11 Min Ago -
-
- Candy jelly-o apple pie chocolate bar croissant gummies tiramisu macaroon. -
- -) - -const Toastr = () => { - const notifyDelay = () => toast.error(, { autoClose: 10000, hideProgressBar: true }) - const notifyAutoClose = () => toast.success(, { autoClose: 3000, hideProgressBar: true }) - const notifySticky = () => toast.info(, { autoClose: false, hideProgressBar: true }) - - return ( - - - Options - - -
- - Delay - - - - AutoClose - - - - Sticky - -
- - - ) -} - -export default Toastr diff --git a/src/views/extensions/toastify/ToastrAnimations.js b/src/views/extensions/toastify/ToastrAnimations.js deleted file mode 100644 index 6ff2d23..0000000 --- a/src/views/extensions/toastify/ToastrAnimations.js +++ /dev/null @@ -1,101 +0,0 @@ -import { Fragment } from 'react' -import Avatar from '@components/avatar' -import { toast, Slide, Zoom, Flip, Bounce } from 'react-toastify' -import { Check, X, AlertTriangle, Info } from 'react-feather' -import { Card, CardHeader, CardBody, CardTitle, Button } from 'reactstrap' - -const SuccessToast = () => ( - -
-
- } /> -
Bounce!
-
- 11 Min Ago -
-
- I do not think that word means what you think it means. -
- -) - -const WarningToast = () => ( - -
-
- } /> -
Flip!
-
- 11 Min Ago -
-
- I do not think that word means what you think it means. -
- -) - -const ErrorToast = () => ( - -
-
- } /> -
Zoom!
-
- 11 Min Ago -
-
- I do not think that word means what you think it means. -
- -) - -const InfoToast = () => ( - -
-
- } /> -
Slide!
-
- 11 Min Ago -
-
- I do not think that word means what you think it means. -
- -) - -const ToastAnimations = () => { - const notifyBounce = () => toast.success(, { transition: Bounce, hideProgressBar: true }) - const notifyFlip = () => toast.warning(, { transition: Flip, hideProgressBar: true }) - const notifyZoom = () => toast.error(, { transition: Zoom, hideProgressBar: true }) - const notifySlide = () => toast.info(, { transition: Slide, hideProgressBar: true }) - - return ( - - - Animations - - -
- - Bounce - - - - Flip - - - - Zoom - - - - Slide - -
- - - ) -} - -export default ToastAnimations diff --git a/src/views/extensions/toastify/index.js b/src/views/extensions/toastify/index.js deleted file mode 100644 index a132f14..0000000 --- a/src/views/extensions/toastify/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import { Fragment } from 'react' -import ExtensionsHeader from '@components/extensions-header' -import { Row, Col } from 'reactstrap' -import ToastrTypes from './ToastTypes' -import ToastrPositions from './ToastPositions' -import ToastrAnimations from './ToastrAnimations' -import ToastrOptions from './ToastifyOptions' - -const Toastr = () => { - return ( - - - - - - - - - - - - - - - - - - - ) -} - -export default Toastr diff --git a/src/views/extensions/tour/index.js b/src/views/extensions/tour/index.js deleted file mode 100644 index cfe1ff9..0000000 --- a/src/views/extensions/tour/index.js +++ /dev/null @@ -1,127 +0,0 @@ -import { Fragment, useContext } from 'react' -import ExtensionsHeader from '@components/extensions-header' -import { Row, Col, Card, CardHeader, CardTitle, CardBody, Button } from 'reactstrap' -import { ShepherdTour, ShepherdTourContext } from 'react-shepherd' - -import 'shepherd.js/dist/css/shepherd.css' -import '@styles/react/libs/shepherd-tour/shepherd-tour.scss' - -const backBtnClass = 'btn btn-sm btn-outline-primary', - nextBtnClass = 'btn btn-sm btn-primary btn-next' - -let instance = null - -const steps = [ - { - id: 'navbar', - title: 'Navbar', - text: 'This is your navbar', - attachTo: { element: '.navbar', on: 'bottom' }, - cancelIcon: { - enabled: true - }, - buttons: [ - { - action: () => instance.cancel(), - classes: backBtnClass, - text: 'Skip' - }, - { - text: 'Next', - classes: nextBtnClass, - action: () => instance.next() - } - ] - }, - { - id: 'card', - title: 'Card', - text: 'This is a card', - attachTo: { element: '#basic-tour .card', on: 'top' }, - cancelIcon: { - enabled: true - }, - buttons: [ - { - text: 'Skip', - classes: backBtnClass, - action: () => instance.cancel() - }, - { - text: 'Back', - classes: backBtnClass, - action: () => instance.back() - }, - { - text: 'Next', - classes: nextBtnClass, - action: () => instance.next() - } - ] - }, - { - id: 'footer', - title: 'Footer', - text: 'This is the footer', - attachTo: { element: '.footer', on: 'top' }, - cancelIcon: { - enabled: true - }, - buttons: [ - { - text: 'Back', - classes: backBtnClass, - action: () => instance.back() - }, - { - text: 'Finish', - classes: nextBtnClass, - action: () => instance.cancel() - } - ] - } -] - -const Content = () => { - const tour = useContext(ShepherdTourContext) - instance = tour - - return ( - - ) -} - -const TourComponent = () => { - return ( - - - - - - - Tour - - - - - - - - - - - ) -} - -export default TourComponent diff --git a/src/views/pages/faq/FaqContact.js b/src/views/pages/faq/FaqContact.js deleted file mode 100644 index d758291..0000000 --- a/src/views/pages/faq/FaqContact.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Row, Col, Card, CardBody } from 'reactstrap' -import { PhoneCall, Mail } from 'react-feather' - -const FaqContact = () => { - return ( -
- - -

You still have a question?

-

- If you cannot find a question in our FAQ, you can always contact us. We will answer to you shortly! -

- - - - -
- -
-

+ (810) 2548 2568

- We are always happy to help! - - - - - - -
- -
-

hello@help.com

- Best way to get answer faster! - - - - -
- ) -} - -export default FaqContact diff --git a/src/views/pages/faq/FaqFilter.js b/src/views/pages/faq/FaqFilter.js deleted file mode 100644 index 98db310..0000000 --- a/src/views/pages/faq/FaqFilter.js +++ /dev/null @@ -1,37 +0,0 @@ -import { Search } from 'react-feather' -import { Card, CardBody, CardText, Form, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap' - -const FaqFilter = ({ searchTerm, setSearchTerm, getFAQData }) => { - const handleFaqFilter = e => { - setSearchTerm(e.target.value) - getFAQData(e.target.value) - } - - return ( -
- - -

Let's answer some questions

- or choose a category to quickly find the help you need -
e.preventDefault()}> - - - - - - - handleFaqFilter(e)} placeholder='search faq...' /> - -
- - -
- ) -} - -export default FaqFilter diff --git a/src/views/pages/faq/Faqs.js b/src/views/pages/faq/Faqs.js deleted file mode 100644 index b2a47d6..0000000 --- a/src/views/pages/faq/Faqs.js +++ /dev/null @@ -1,87 +0,0 @@ -import { useState } from 'react' -import * as Icon from 'react-feather' -import AppCollapse from '@components/app-collapse' -import illustration from '@src/assets/images/illustration/faq-illustrations.svg' -import { Nav, NavItem, NavLink, Row, Col, TabContent, TabPane } from 'reactstrap' - -const Faqs = ({ data }) => { - const dataToRender = [] - - const [activeTab, setActiveTab] = useState('Payment') - - const toggleTab = tab => setActiveTab(tab) - - Object.entries(data).forEach(([key, val]) => { - dataToRender.push(val) - }) - - const renderTabs = () => { - return dataToRender.map(item => { - const IconTag = Icon[item.icon] - return ( - - toggleTab(item.title)}> - - {item.title} - - - ) - }) - } - - const renderTabContent = () => { - return dataToRender.map(item => { - const IconTag = Icon[item.icon] - - return ( - -
-
- -
-
-

{item.title}

- {item.subtitle} -
-
- - - ) - }) - } - - return ( -
- - -
- - illustration -
- - - {renderTabContent()} - - -
- ) -} - -export default Faqs diff --git a/src/views/pages/faq/index.js b/src/views/pages/faq/index.js deleted file mode 100644 index c72d507..0000000 --- a/src/views/pages/faq/index.js +++ /dev/null @@ -1,34 +0,0 @@ -import { Fragment, useState, useEffect } from 'react' -import axios from 'axios' -import Faqs from './Faqs' -import FaqFilter from './FaqFilter' -import FaqContact from './FaqContact' -import Breadcrumbs from '@components/breadcrumbs' - -import '@styles/base/pages/page-faq.scss' - -const Faq = () => { - const [data, setData] = useState(null), - [searchTerm, setSearchTerm] = useState('') - - const getFAQData = query => { - return axios.get('/faq/data', { params: { q: query } }).then(response => { - setData(response.data) - }) - } - - useEffect(() => { - getFAQData(searchTerm) - }, []) - - return ( - - - - {data !== null ? : null} - - - ) -} - -export default Faq diff --git a/src/views/pages/profile/index.js b/src/views/pages/profile/index.js index f593bde..ab332ea 100644 --- a/src/views/pages/profile/index.js +++ b/src/views/pages/profile/index.js @@ -30,7 +30,6 @@ const Profile = () => { }, []) return ( - {data !== null ? (
diff --git a/src/views/tables/data-tables/advance/TableAdvSearch.js b/src/views/tables/data-tables/advance/TableAdvSearch.js deleted file mode 100644 index cc725d0..0000000 --- a/src/views/tables/data-tables/advance/TableAdvSearch.js +++ /dev/null @@ -1,336 +0,0 @@ -// ** React Imports -import { useState, Fragment } from 'react' - -// ** Table Columns -import { data, advSearchColumns } from '../data' - -// ** Third Party Components -import Flatpickr from 'react-flatpickr' -import ReactPaginate from 'react-paginate' -import { ChevronDown } from 'react-feather' -import DataTable from 'react-data-table-component' -import { Card, CardHeader, CardBody, CardTitle, Input, Label, FormGroup, Row, Col } from 'reactstrap' - -// ** Styles -import '@styles/react/libs/flatpickr/flatpickr.scss' - -const DataTableAdvSearch = () => { - // ** States - const [Picker, setPicker] = useState('') - const [searchName, setSearchName] = useState('') - const [searchPost, setSearchPost] = useState('') - const [searchCity, setSearchCity] = useState('') - const [currentPage, setCurrentPage] = useState(0) - const [searchEmail, setSearchEmail] = useState('') - const [searchSalary, setSearchSalary] = useState('') - const [filteredData, setFilteredData] = useState([]) - - // ** Function to handle Pagination - const handlePagination = page => setCurrentPage(page.selected) - - // ** Table data to render - const dataToRender = () => { - if ( - searchName.length || - searchPost.length || - searchEmail.length || - searchCity.length || - searchSalary.length || - Picker.length - ) { - return filteredData - } else { - return data - } - } - - // ** Custom Pagination - const CustomPagination = () => ( - handlePagination(page)} - pageCount={dataToRender().length / 7 || 1} - breakLabel={'...'} - pageRangeDisplayed={2} - marginPagesDisplayed={2} - activeClassName={'active'} - pageClassName={'page-item'} - nextLinkClassName={'page-link'} - nextClassName={'page-item next'} - previousClassName={'page-item prev'} - previousLinkClassName={'page-link'} - pageLinkClassName={'page-link'} - breakClassName='page-item' - breakLinkClassName='page-link' - containerClassName={'pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1 mt-1'} - /> - ) - - // ** Function to handle name filter - const handleNameFilter = e => { - const value = e.target.value - let updatedData = [] - const dataToFilter = () => { - if (searchEmail.length || searchPost.length || searchCity.length || searchSalary.length || Picker.length) { - return filteredData - } else { - return data - } - } - - setSearchName(value) - if (value.length) { - updatedData = dataToFilter().filter(item => { - const startsWith = item.full_name.toLowerCase().startsWith(value.toLowerCase()) - - const includes = item.full_name.toLowerCase().includes(value.toLowerCase()) - - if (startsWith) { - return startsWith - } else if (!startsWith && includes) { - return includes - } else return null - }) - setFilteredData([...updatedData]) - setSearchName(value) - } - } - - // ** Function to handle email filter - const handleEmailFilter = e => { - const value = e.target.value - let updatedData = [] - const dataToFilter = () => { - if (searchName.length || searchPost.length || searchCity.length || searchSalary.length || Picker.length) { - return filteredData - } else { - return data - } - } - - setSearchEmail(value) - if (value.length) { - updatedData = dataToFilter().filter(item => { - const startsWith = item.email.toLowerCase().startsWith(value.toLowerCase()) - - const includes = item.email.toLowerCase().includes(value.toLowerCase()) - - if (startsWith) { - return startsWith - } else if (!startsWith && includes) { - return includes - } else return null - }) - setFilteredData([...updatedData]) - setSearchEmail(value) - } - } - - // ** Function to handle post filter - const handlePostFilter = e => { - const value = e.target.value - let updatedData = [] - const dataToFilter = () => { - if (searchEmail.length || searchName.length || searchCity.length || searchSalary.length || Picker.length) { - return filteredData - } else { - return data - } - } - - setSearchPost(value) - if (value.length) { - updatedData = dataToFilter().filter(item => { - const startsWith = item.post.toLowerCase().startsWith(value.toLowerCase()) - - const includes = item.post.toLowerCase().includes(value.toLowerCase()) - - if (startsWith) { - return startsWith - } else if (!startsWith && includes) { - return includes - } else return null - }) - setFilteredData([...updatedData]) - setSearchPost(value) - } - } - - // ** Function to handle city filter - const handleCityFilter = e => { - const value = e.target.value - let updatedData = [] - const dataToFilter = () => { - if (searchEmail.length || searchName.length || searchPost.length || searchSalary.length || Picker.length) { - return filteredData - } else { - return data - } - } - - setSearchCity(value) - if (value.length) { - updatedData = dataToFilter().filter(item => { - const startsWith = item.city.toLowerCase().startsWith(value.toLowerCase()) - - const includes = item.city.toLowerCase().includes(value.toLowerCase()) - - if (startsWith) { - return startsWith - } else if (!startsWith && includes) { - return includes - } else return null - }) - setFilteredData([...updatedData]) - setSearchCity(value) - } - } - - // ** Function to handle salary filter - const handleSalaryFilter = e => { - const value = e.target.value - let updatedData = [] - const dataToFilter = () => { - if (searchEmail.length || searchName.length || searchPost.length || searchCity.length || Picker.length) { - return filteredData - } else { - return data - } - } - - setSearchSalary(value) - if (value.length) { - updatedData = dataToFilter().filter(item => { - const startsWith = item.salary.toLowerCase().startsWith(value.toLowerCase()) - - const includes = item.salary.toLowerCase().includes(value.toLowerCase()) - - if (startsWith) { - return startsWith - } else if (!startsWith && includes) { - return includes - } else return null - }) - setFilteredData([...updatedData]) - setSearchSalary(value) - } - } - - // ** Function to handle date filter - const handleDateFilter = range => { - const arr = [] - let updatedData = [] - const dataToFilter = () => { - if (searchEmail.length || searchName.length || searchPost.length || searchCity.length || searchSalary.length) { - return filteredData - } else { - return data - } - } - - range.map(i => { - const date = new Date(i) - - const year = date.getFullYear() - - let month = (1 + date.getMonth()).toString() - month = month.length > 1 ? month : `0${month}` - - let day = date.getDate().toString() - day = day.length > 1 ? day : `0${day}` - - arr.push(`${month}/${day}/${year}`) - return true - }) - - setPicker(range) - - if (range.length) { - updatedData = dataToFilter().filter(item => { - return ( - new Date(item.start_date).getTime() >= new Date(arr[0]).getTime() && - new Date(item.start_date).getTime() <= new Date(arr[1]).getTime() - ) - }) - setFilteredData([...updatedData]) - setPicker(range) - } - } - - return ( - - - - Advance Search - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - handleDateFilter(date)} - /> - - - - - - - - - - - } - paginationDefaultPage={currentPage + 1} - paginationComponent={CustomPagination} - data={dataToRender()} - /> - - - ) -} - -export default DataTableAdvSearch diff --git a/src/views/tables/data-tables/advance/TableServerSide.js b/src/views/tables/data-tables/advance/TableServerSide.js deleted file mode 100644 index a1f7919..0000000 --- a/src/views/tables/data-tables/advance/TableServerSide.js +++ /dev/null @@ -1,180 +0,0 @@ -// ** React Imports -import { Fragment, useState, useEffect, memo } from 'react' - -// ** Table Columns -import { serverSideColumns } from '../data' - -// ** Store & Actions -import { getData } from '../store/actions' -import { useSelector, useDispatch } from 'react-redux' - -// ** Third Party Components -import ReactPaginate from 'react-paginate' -import { ChevronDown } from 'react-feather' -import DataTable from 'react-data-table-component' -import { Card, CardHeader, CardTitle, Input, Label, Row, Col } from 'reactstrap' - -const DataTableServerSide = () => { - // ** Store Vars - const dispatch = useDispatch() - const store = useSelector(state => state.dataTables) - - // ** States - const [currentPage, setCurrentPage] = useState(1) - const [rowsPerPage, setRowsPerPage] = useState(7) - const [searchValue, setSearchValue] = useState('') - - // ** Get data on mount - useEffect(() => { - dispatch( - getData({ - page: currentPage, - perPage: rowsPerPage, - q: searchValue - }) - ) - }, [dispatch]) - - // ** Function to handle filter - const handleFilter = e => { - setSearchValue(e.target.value) - - dispatch( - getData({ - page: currentPage, - perPage: rowsPerPage, - q: e.target.value - }) - ) - } - - // ** Function to handle Pagination and get data - const handlePagination = page => { - dispatch( - getData({ - page: page.selected + 1, - perPage: rowsPerPage, - q: searchValue - }) - ) - setCurrentPage(page.selected + 1) - } - - // ** Function to handle per page - const handlePerPage = e => { - dispatch( - getData({ - page: currentPage, - perPage: parseInt(e.target.value), - q: searchValue - }) - ) - setRowsPerPage(parseInt(e.target.value)) - } - - // ** Custom Pagination - const CustomPagination = () => { - const count = Number((store.total / rowsPerPage).toFixed(0)) - - return ( - handlePagination(page)} - pageClassName={'page-item'} - nextLinkClassName={'page-link'} - nextClassName={'page-item next'} - previousClassName={'page-item prev'} - previousLinkClassName={'page-link'} - pageLinkClassName={'page-link'} - breakClassName='page-item' - breakLinkClassName='page-link' - containerClassName={ - 'pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1 mt-1' - } - /> - ) - } - - // ** Table data to render - const dataToRender = () => { - const filters = { - q: searchValue - } - - const isFiltered = Object.keys(filters).some(function (k) { - return filters[k].length > 0 - }) - - if (store.data.length > 0) { - return store.data - } else if (store.data.length === 0 && isFiltered) { - return [] - } else { - return store.allData.slice(0, rowsPerPage) - } - } - - return ( - - - - Server Side - - - -
- - handlePerPage(e)} - > - - - - - - - - -
- - - - - - - } - paginationComponent={CustomPagination} - data={dataToRender()} - /> - - - ) -} - -export default memo(DataTableServerSide) diff --git a/src/views/tables/data-tables/advance/index.js b/src/views/tables/data-tables/advance/index.js deleted file mode 100644 index 0ba475d..0000000 --- a/src/views/tables/data-tables/advance/index.js +++ /dev/null @@ -1,33 +0,0 @@ -// ** React Imports -import { Fragment } from 'react' - -// ** Custom Components -import Breadcrumbs from '@components/breadcrumbs' - -// ** Third Party Components -import { Row, Col } from 'reactstrap' - -// ** Tables -import TableServerSide from './TableServerSide' -import TableAdvSearch from './TableAdvSearch' - -// ** Styles -import '@styles/react/libs/tables/react-dataTable-component.scss' - -const Tables = () => { - return ( - - - - - - - - - - - - ) -} - -export default Tables diff --git a/src/views/tables/data-tables/basic/AddNewModal.js b/src/views/tables/data-tables/basic/AddNewModal.js deleted file mode 100644 index 379282e..0000000 --- a/src/views/tables/data-tables/basic/AddNewModal.js +++ /dev/null @@ -1,108 +0,0 @@ -// ** React Imports -import { useState } from 'react' - -// ** Third Party Components -import Flatpickr from 'react-flatpickr' -import { User, Briefcase, Mail, Calendar, DollarSign, X } from 'react-feather' -import { - Button, - Modal, - ModalHeader, - ModalBody, - FormGroup, - InputGroup, - InputGroupAddon, - InputGroupText, - Input, - Label -} from 'reactstrap' - -// ** Styles -import '@styles/react/libs/flatpickr/flatpickr.scss' - -const AddNewModal = ({ open, handleModal }) => { - // ** State - const [Picker, setPicker] = useState(new Date()) - - // ** Custom close btn - const CloseBtn = - - return ( - - -
New Record
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - setPicker(date)} /> - - - - - - - - - - - - - - - - - - ) -} - -export default AddNewModal diff --git a/src/views/tables/data-tables/basic/TableExpandable.js b/src/views/tables/data-tables/basic/TableExpandable.js deleted file mode 100644 index 2374674..0000000 --- a/src/views/tables/data-tables/basic/TableExpandable.js +++ /dev/null @@ -1,69 +0,0 @@ -// ** React Imports -import { useState } from 'react' - -// ** Table columns & Expandable Data -import ExpandableTable, { data, columns } from '../data' - -// ** Third Party Components -import ReactPaginate from 'react-paginate' -import { ChevronDown } from 'react-feather' -import DataTable from 'react-data-table-component' -import { Card, CardHeader, CardTitle } from 'reactstrap' - -const DataTableWithButtons = () => { - // ** State - const [currentPage, setCurrentPage] = useState(0) - - // ** Function to handle filter - const handlePagination = page => { - setCurrentPage(page.selected) - } - - // ** Custom Pagination - const CustomPagination = () => ( - handlePagination(page)} - pageCount={10} - breakLabel={'...'} - pageRangeDisplayed={2} - marginPagesDisplayed={2} - activeClassName={'active'} - pageClassName={'page-item'} - nextLinkClassName={'page-link'} - nextClassName={'page-item next'} - previousClassName={'page-item prev'} - previousLinkClassName={'page-link'} - pageLinkClassName={'page-link'} - breakClassName='page-item' - breakLinkClassName='page-link' - containerClassName={'pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1'} - /> - ) - - return ( - - - Expandable Row - - } - paginationDefaultPage={currentPage + 1} - expandableRowsComponent={} - paginationRowsPerPageOptions={[10, 25, 50, 100]} - paginationComponent={CustomPagination} - /> - - ) -} - -export default DataTableWithButtons diff --git a/src/views/tables/data-tables/basic/TableMultilingual.js b/src/views/tables/data-tables/basic/TableMultilingual.js deleted file mode 100644 index d117801..0000000 --- a/src/views/tables/data-tables/basic/TableMultilingual.js +++ /dev/null @@ -1,158 +0,0 @@ -// ** React Imports -import { Fragment, useState } from 'react' - -// ** Table Columns -import { data, multiLingColumns } from '../data' - -// ** Third Party Components -import ReactPaginate from 'react-paginate' -import { ChevronDown } from 'react-feather' -import { FormattedMessage } from 'react-intl' -import DataTable from 'react-data-table-component' -import { Card, CardHeader, CardTitle, CardFooter, CardText, Input, Label, Row, Col } from 'reactstrap' - -const DataTableWithButtons = () => { - // ** State - const [currentPage, setCurrentPage] = useState(0) - const [searchValue, setSearchValue] = useState('') - const [filteredData, setFilteredData] = useState([]) - - // ** Function to handle pagination - const handlePagination = page => { - setCurrentPage(page.selected) - } - - // ** Function to handle filter - const handleFilter = e => { - const value = e.target.value - let updatedData = [] - setSearchValue(value) - - const status = { - 1: { title: 'Current', color: 'light-primary' }, - 2: { title: 'Professional', color: 'light-success' }, - 3: { title: 'Rejected', color: 'light-danger' }, - 4: { title: 'Resigned', color: 'light-warning' }, - 5: { title: 'Applied', color: 'light-info' } - } - - if (value.length) { - updatedData = data.filter(item => { - const startsWith = - item.full_name.toLowerCase().startsWith(value.toLowerCase()) || - item.post.toLowerCase().startsWith(value.toLowerCase()) || - item.email.toLowerCase().startsWith(value.toLowerCase()) || - item.age.toLowerCase().startsWith(value.toLowerCase()) || - item.salary.toLowerCase().startsWith(value.toLowerCase()) || - item.start_date.toLowerCase().startsWith(value.toLowerCase()) || - status[item.status].title.toLowerCase().startsWith(value.toLowerCase()) - - const includes = - item.full_name.toLowerCase().includes(value.toLowerCase()) || - item.post.toLowerCase().includes(value.toLowerCase()) || - item.email.toLowerCase().includes(value.toLowerCase()) || - item.age.toLowerCase().includes(value.toLowerCase()) || - item.salary.toLowerCase().includes(value.toLowerCase()) || - item.start_date.toLowerCase().includes(value.toLowerCase()) || - status[item.status].title.toLowerCase().includes(value.toLowerCase()) - - if (startsWith) { - return startsWith - } else if (!startsWith && includes) { - return includes - } else return null - }) - setFilteredData(updatedData) - setSearchValue(value) - } - } - - // ** Pagination Previous Component - const Previous = () => { - return ( - - - - - - ) - } - - // ** Pagination Next Component - const Next = () => { - return ( - - - - - - ) - } - - // ** Custom Pagination Component - const CustomPagination = () => ( - } - nextLabel={} - forcePage={currentPage} - onPageChange={page => handlePagination(page)} - pageCount={searchValue.length ? filteredData.length / 7 : data.length / 7 || 1} - breakLabel={'...'} - pageRangeDisplayed={2} - marginPagesDisplayed={2} - activeClassName={'active'} - pageClassName={'page-item'} - nextLinkClassName={'page-link'} - nextClassName={'page-item next'} - previousClassName={'page-item prev'} - previousLinkClassName={'page-link'} - pageLinkClassName={'page-link'} - breakClassName='page-item' - breakLinkClassName='page-link' - containerClassName={'pagination react-paginate pagination-sm justify-content-end pr-1 mt-1'} - /> - ) - - return ( - - - Multilingual - - - - - - - - } - paginationDefaultPage={currentPage + 1} - paginationComponent={CustomPagination} - data={searchValue.length ? filteredData : data} - /> - - - Note:{' '} - Use Intl Dropdown in Navbar to change table language - - - - ) -} - -export default DataTableWithButtons diff --git a/src/views/tables/data-tables/basic/TableWithButtons.js b/src/views/tables/data-tables/basic/TableWithButtons.js deleted file mode 100644 index ebd1d48..0000000 --- a/src/views/tables/data-tables/basic/TableWithButtons.js +++ /dev/null @@ -1,241 +0,0 @@ -// ** React Imports -import { Fragment, useState, forwardRef } from 'react' - -// ** Table Data & Columns -import { data, columns } from '../data' - -// ** Add New Modal Component -import AddNewModal from './AddNewModal' - -// ** Third Party Components -import ReactPaginate from 'react-paginate' -import DataTable from 'react-data-table-component' -import { ChevronDown, Share, Printer, FileText, File, Grid, Copy, Plus } from 'react-feather' -import { - Card, - CardHeader, - CardTitle, - Button, - UncontrolledButtonDropdown, - DropdownToggle, - DropdownMenu, - DropdownItem, - Input, - Label, - Row, - Col -} from 'reactstrap' - -// ** Bootstrap Checkbox Component -const BootstrapCheckbox = forwardRef(({ onClick, ...rest }, ref) => ( -
- -
-)) - -const DataTableWithButtons = () => { - // ** States - const [modal, setModal] = useState(false) - const [currentPage, setCurrentPage] = useState(0) - const [searchValue, setSearchValue] = useState('') - const [filteredData, setFilteredData] = useState([]) - - // ** Function to handle Modal toggle - const handleModal = () => setModal(!modal) - - // ** Function to handle filter - const handleFilter = e => { - const value = e.target.value - let updatedData = [] - setSearchValue(value) - - const status = { - 1: { title: 'Current', color: 'light-primary' }, - 2: { title: 'Professional', color: 'light-success' }, - 3: { title: 'Rejected', color: 'light-danger' }, - 4: { title: 'Resigned', color: 'light-warning' }, - 5: { title: 'Applied', color: 'light-info' } - } - - if (value.length) { - updatedData = data.filter(item => { - const startsWith = - item.full_name.toLowerCase().startsWith(value.toLowerCase()) || - item.post.toLowerCase().startsWith(value.toLowerCase()) || - item.email.toLowerCase().startsWith(value.toLowerCase()) || - item.age.toLowerCase().startsWith(value.toLowerCase()) || - item.salary.toLowerCase().startsWith(value.toLowerCase()) || - item.start_date.toLowerCase().startsWith(value.toLowerCase()) || - status[item.status].title.toLowerCase().startsWith(value.toLowerCase()) - - const includes = - item.full_name.toLowerCase().includes(value.toLowerCase()) || - item.post.toLowerCase().includes(value.toLowerCase()) || - item.email.toLowerCase().includes(value.toLowerCase()) || - item.age.toLowerCase().includes(value.toLowerCase()) || - item.salary.toLowerCase().includes(value.toLowerCase()) || - item.start_date.toLowerCase().includes(value.toLowerCase()) || - status[item.status].title.toLowerCase().includes(value.toLowerCase()) - - if (startsWith) { - return startsWith - } else if (!startsWith && includes) { - return includes - } else return null - }) - setFilteredData(updatedData) - setSearchValue(value) - } - } - - // ** Function to handle Pagination - const handlePagination = page => { - setCurrentPage(page.selected) - } - - // ** Custom Pagination - const CustomPagination = () => ( - handlePagination(page)} - pageCount={searchValue.length ? filteredData.length / 7 : data.length / 7 || 1} - breakLabel='...' - pageRangeDisplayed={2} - marginPagesDisplayed={2} - activeClassName='active' - pageClassName='page-item' - breakClassName='page-item' - breakLinkClassName='page-link' - nextLinkClassName='page-link' - nextClassName='page-item next' - previousClassName='page-item prev' - previousLinkClassName='page-link' - pageLinkClassName='page-link' - breakClassName='page-item' - breakLinkClassName='page-link' - containerClassName='pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1 mt-1' - /> - ) - - // ** Converts table to CSV - function convertArrayOfObjectsToCSV(array) { - let result - - const columnDelimiter = ',' - const lineDelimiter = '\n' - const keys = Object.keys(data[0]) - - result = '' - result += keys.join(columnDelimiter) - result += lineDelimiter - - array.forEach(item => { - let ctr = 0 - keys.forEach(key => { - if (ctr > 0) result += columnDelimiter - - result += item[key] - - ctr++ - }) - result += lineDelimiter - }) - - return result - } - - // ** Downloads CSV - function downloadCSV(array) { - const link = document.createElement('a') - let csv = convertArrayOfObjectsToCSV(array) - if (csv === null) return - - const filename = 'export.csv' - - if (!csv.match(/^data:text\/csv/i)) { - csv = `data:text/csv;charset=utf-8,${csv}` - } - - link.setAttribute('href', encodeURI(csv)) - link.setAttribute('download', filename) - link.click() - } - - return ( - - - - DataTable with Buttons -
- - - - Export - - - - - Print - - downloadCSV(data)}> - - CSV - - - - Excel - - - - PDF - - - - Copy - - - - -
- - - - - - - - } - paginationDefaultPage={currentPage + 1} - paginationComponent={CustomPagination} - data={searchValue.length ? filteredData : data} - selectableRowsComponent={BootstrapCheckbox} - /> - - - - ) -} - -export default DataTableWithButtons diff --git a/src/views/tables/data-tables/basic/TableZeroConfig.js b/src/views/tables/data-tables/basic/TableZeroConfig.js deleted file mode 100644 index 45f4d42..0000000 --- a/src/views/tables/data-tables/basic/TableZeroConfig.js +++ /dev/null @@ -1,28 +0,0 @@ -// ** Table Columns -import { data, basicColumns } from '../data' - -// ** Third Party Components -import { ChevronDown } from 'react-feather' -import DataTable from 'react-data-table-component' -import { Card, CardHeader, CardTitle } from 'reactstrap' - -const DataTablesBasic = () => { - return ( - - - Zero Configuration - - } - paginationRowsPerPageOptions={[10, 25, 50, 100]} - /> - - ) -} - -export default DataTablesBasic diff --git a/src/views/tables/data-tables/basic/index.js b/src/views/tables/data-tables/basic/index.js deleted file mode 100644 index 7af8ebc..0000000 --- a/src/views/tables/data-tables/basic/index.js +++ /dev/null @@ -1,41 +0,0 @@ -// ** React Imports -import { Fragment } from 'react' - -// ** Custom Components -import Breadcrumbs from '@components/breadcrumbs' - -// ** Third Party Components -import { Row, Col } from 'reactstrap' - -// ** Tables -import TableExpandable from './TableExpandable' -import TableZeroConfig from './TableZeroConfig' -import TableWithButtons from './TableWithButtons' -import TableMultilingual from './TableMultilingual' - -// ** Styles -import '@styles/react/libs/tables/react-dataTable-component.scss' - -const Tables = () => { - return ( - - - - - - - - - - - - - - - - - - ) -} - -export default Tables diff --git a/src/views/tables/data-tables/data.js b/src/views/tables/data-tables/data.js deleted file mode 100644 index 16fc944..0000000 --- a/src/views/tables/data-tables/data.js +++ /dev/null @@ -1,334 +0,0 @@ -// ** Custom Components -import Avatar from '@components/avatar' - -// ** Third Party Components -import axios from 'axios' -import { MoreVertical, Edit, FileText, Archive, Trash } from 'react-feather' -import { Badge, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap' - -// ** Vars -const states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'] - -const status = { - 1: { title: 'Current', color: 'light-primary' }, - 2: { title: 'Professional', color: 'light-success' }, - 3: { title: 'Rejected', color: 'light-danger' }, - 4: { title: 'Resigned', color: 'light-warning' }, - 5: { title: 'Applied', color: 'light-info' } -} - -export let data - -// ** Get initial Data -axios.get('/api/datatables/initial-data').then(response => { - data = response.data -}) - -// ** Table Zero Config Column -export const basicColumns = [ - { - name: 'ID', - selector: 'id', - sortable: true, - maxWidth: '100px' - }, - { - name: 'Name', - selector: 'full_name', - sortable: true, - minWidth: '225px' - }, - { - name: 'Email', - selector: 'email', - sortable: true, - minWidth: '310px' - }, - { - name: 'Position', - selector: 'post', - sortable: true, - minWidth: '250px' - }, - { - name: 'Age', - selector: 'age', - sortable: true, - minWidth: '100px' - }, - { - name: 'Salary', - selector: 'salary', - sortable: true, - minWidth: '175px' - } -] - -// ** Expandable table component -const ExpandableTable = ({ data }) => { - return ( -
-

- City: {data.city} -

-

- Experience: {data.experience} -

-

- Post: {data.post} -

-
- ) -} - -// ** Table Common Column -export const columns = [ - { - name: 'Name', - selector: 'full_name', - sortable: true, - minWidth: '250px', - cell: row => ( -
- {row.avatar === '' ? ( - - ) : ( - - )} -
- {row.full_name} - {row.post} -
-
- ) - }, - { - name: 'Email', - selector: 'email', - sortable: true, - minWidth: '250px' - }, - { - name: 'Date', - selector: 'start_date', - sortable: true, - minWidth: '150px' - }, - - { - name: 'Salary', - selector: 'salary', - sortable: true, - minWidth: '150px' - }, - { - name: 'Age', - selector: 'age', - sortable: true, - minWidth: '100px' - }, - { - name: 'Status', - selector: 'status', - sortable: true, - minWidth: '150px', - cell: row => { - return ( - - {status[row.status].title} - - ) - } - }, - { - name: 'Actions', - allowOverflow: true, - cell: row => { - return ( -
- - - - - - e.preventDefault()}> - - Details - - e.preventDefault()}> - - Archive - - e.preventDefault()}> - - Delete - - - - -
- ) - } - } -] - -// ** Table Intl Column -export const multiLingColumns = [ - { - name: 'Name', - selector: 'full_name', - sortable: true, - minWidth: '200px' - }, - { - name: 'Position', - selector: 'post', - sortable: true, - minWidth: '250px' - }, - { - name: 'Email', - selector: 'email', - sortable: true, - minWidth: '250px' - }, - { - name: 'Date', - selector: 'start_date', - sortable: true, - minWidth: '150px' - }, - - { - name: 'Salary', - selector: 'salary', - sortable: true, - minWidth: '150px' - }, - { - name: 'Status', - selector: 'status', - sortable: true, - minWidth: '150px', - cell: row => { - return ( - - {status[row.status].title} - - ) - } - }, - { - name: 'Actions', - allowOverflow: true, - cell: row => { - return ( -
- - - - - - - - Details - - - - Archive - - - - Delete - - - - -
- ) - } - } -] - -// ** Table Server Side Column -export const serverSideColumns = [ - { - name: 'Full Name', - selector: 'full_name', - sortable: true, - minWidth: '225px' - }, - { - name: 'Email', - selector: 'email', - sortable: true, - minWidth: '250px' - }, - { - name: 'Position', - selector: 'post', - sortable: true, - minWidth: '250px' - }, - { - name: 'Office', - selector: 'city', - sortable: true, - minWidth: '150px' - }, - { - name: 'Start Date', - selector: 'start_date', - sortable: true, - minWidth: '150px' - }, - { - name: 'Salary', - selector: 'salary', - sortable: true, - minWidth: '150px' - } -] - -// ** Table Adv Search Column -export const advSearchColumns = [ - { - name: 'Name', - selector: 'full_name', - sortable: true, - minWidth: '200px' - }, - { - name: 'Email', - selector: 'email', - sortable: true, - minWidth: '250px' - }, - { - name: 'Post', - selector: 'post', - sortable: true, - minWidth: '250px' - }, - { - name: 'City', - selector: 'city', - sortable: true, - minWidth: '150px' - }, - { - name: 'Date', - selector: 'start_date', - sortable: true, - minWidth: '150px' - }, - - { - name: 'Salary', - selector: 'salary', - sortable: true, - minWidth: '100px' - } -] - -export default ExpandableTable diff --git a/src/views/tables/data-tables/store/actions/index.js b/src/views/tables/data-tables/store/actions/index.js deleted file mode 100644 index a2fbaec..0000000 --- a/src/views/tables/data-tables/store/actions/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import axios from 'axios' - -// ** Get table Data -export const getData = params => { - return async dispatch => { - await axios.get('/api/datatables/data', params).then(response => { - dispatch({ - type: 'GET_DATA', - allData: response.data.allData, - data: response.data.invoices, - totalPages: response.data.total, - params - }) - }) - } -} diff --git a/src/views/tables/data-tables/store/reducer/index.js b/src/views/tables/data-tables/store/reducer/index.js deleted file mode 100644 index 92c1df4..0000000 --- a/src/views/tables/data-tables/store/reducer/index.js +++ /dev/null @@ -1,24 +0,0 @@ -// ** Initial State -const initialState = { - data: [], - total: 1, - params: {}, - allData: [] -} - -const DataTablesReducer = (state = initialState, action) => { - switch (action.type) { - case 'GET_DATA': - return { - ...state, - allData: action.allData, - data: action.data, - total: action.totalPages, - params: action.params - } - default: - return state - } -} - -export default DataTablesReducer diff --git a/src/views/tables/reactstrap/TableBasic.js b/src/views/tables/reactstrap/TableBasic.js deleted file mode 100644 index 7da42ea..0000000 --- a/src/views/tables/reactstrap/TableBasic.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Lilian', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Alberto', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Bruce', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Diana', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Rey', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'James', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Lee', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Mario', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Oswald', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Christie', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Barnes', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Arthur', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableBasic = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableBasic diff --git a/src/views/tables/reactstrap/TableBordered.js b/src/views/tables/reactstrap/TableBordered.js deleted file mode 100644 index 4e461d8..0000000 --- a/src/views/tables/reactstrap/TableBordered.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Leslie', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Quinn', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Quinn', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Felicia', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Brent', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Patricia', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Breanna', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Peter', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Cherokee', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Martina', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Butcher', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Noel', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableBordered = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableBordered diff --git a/src/views/tables/reactstrap/TableBorderless.js b/src/views/tables/reactstrap/TableBorderless.js deleted file mode 100644 index c5835c3..0000000 --- a/src/views/tables/reactstrap/TableBorderless.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Sarah', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Ainsley', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Charissa', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Vanna', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Inga', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Patricia', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Justina', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Lamar', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Briar', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Jenette', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Francis', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Isaac', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableBorderless = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableBorderless diff --git a/src/views/tables/reactstrap/TableContextual.js b/src/views/tables/reactstrap/TableContextual.js deleted file mode 100644 index 094760c..0000000 --- a/src/views/tables/reactstrap/TableContextual.js +++ /dev/null @@ -1,541 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import figma from '@src/assets/images/icons/figma.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Illiana', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Wyatt', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Troy', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Mufutau', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Denton', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Carol', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Kyla', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Hop', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Yvonne', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Lunea', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Francis', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Kameko', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData5 = [ - { - title: 'Blair', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Aspen', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Tyler', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData6 = [ - { - title: 'Florence', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Kieran', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Anthony', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData7 = [ - { - title: 'Lysandra', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Russell', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Curran', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData8 = [ - { - title: 'Britanney', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Avye', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Castor', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData9 = [ - { - title: 'Charissa', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Elijah', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Giacomo', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData10 = [ - { - title: 'Chaim', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Virginia', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Kristen', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableContextual = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- figma - Figma Project - Ronnie Shane - {' '} - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- angular - Angular Project - Peter Charls - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- figma - Figma Project - Janne Ale - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Custom - Ted Richer - - - - Schedule - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Latest Bootstrap - Perry Parker - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- angular - Angular UI - Ana Bell - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap UI - Jerry Milton - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableContextual diff --git a/src/views/tables/reactstrap/TableDark.js b/src/views/tables/reactstrap/TableDark.js deleted file mode 100644 index ad9305e..0000000 --- a/src/views/tables/reactstrap/TableDark.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Levi', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Nina', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Brynn', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Liberty', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Fallon', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Minerva', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Palmer', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Tana', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Evangeline', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Winter', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Carl', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Andrew', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableDark = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableDark diff --git a/src/views/tables/reactstrap/TableHover.js b/src/views/tables/reactstrap/TableHover.js deleted file mode 100644 index 32932d0..0000000 --- a/src/views/tables/reactstrap/TableHover.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Griffith', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Hu', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Felicia', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Quinlan', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Patrick', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Castor', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Mohammad', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Isabella', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Michael', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Lavinia', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Nelle', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Virginia', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableHover = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableHover diff --git a/src/views/tables/reactstrap/TableHoverAnimation.js b/src/views/tables/reactstrap/TableHoverAnimation.js deleted file mode 100644 index 8b4286d..0000000 --- a/src/views/tables/reactstrap/TableHoverAnimation.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Yoshi', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Kevyn', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Louis', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Aileen', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Karleigh', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Elmo', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Blossom', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Jescie', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Gemma', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Thor', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Jack', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Reece', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableHoverAnimation = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableHoverAnimation diff --git a/src/views/tables/reactstrap/TableResponsive.js b/src/views/tables/reactstrap/TableResponsive.js deleted file mode 100644 index 5011efe..0000000 --- a/src/views/tables/reactstrap/TableResponsive.js +++ /dev/null @@ -1,122 +0,0 @@ -import { Table } from 'reactstrap' - -const TableResponsive = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- # - - Heading 1 - - Heading 2 - - Heading 3 - - Heading 4 - - Heading 5 - - Heading 6 - - Heading 7 - - Heading 8 - - Heading 9 - - Heading 10 - - Heading 11 - - Heading 12 - - Heading 13 -
1Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
4Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
- ) -} - -export default TableResponsive diff --git a/src/views/tables/reactstrap/TableSmall.js b/src/views/tables/reactstrap/TableSmall.js deleted file mode 100644 index 1f39c30..0000000 --- a/src/views/tables/reactstrap/TableSmall.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Melissa', - img: avatar1, - imgHeight: 22, - imgWidth: 22 - }, - { - title: 'Jana', - img: avatar2, - imgHeight: 22, - imgWidth: 22 - }, - { - title: 'Halla', - img: avatar3, - imgHeight: 22, - imgWidth: 22 - } -] - -const avatarGroupData2 = [ - { - title: 'Wing', - img: avatar1, - imgHeight: 22, - imgWidth: 22 - }, - { - title: 'Octavia', - img: avatar2, - imgHeight: 22, - imgWidth: 22 - }, - { - title: 'Benedict', - img: avatar3, - imgHeight: 22, - imgWidth: 22 - } -] - -const avatarGroupData3 = [ - { - title: 'Jade', - img: avatar1, - imgHeight: 22, - imgWidth: 22 - }, - { - title: 'Alisa', - img: avatar2, - imgHeight: 22, - imgWidth: 22 - }, - { - title: 'Alisa', - img: avatar3, - imgHeight: 22, - imgWidth: 22 - } -] - -const avatarGroupData4 = [ - { - title: 'Alexa', - img: avatar1, - imgHeight: 22, - imgWidth: 22 - }, - { - title: 'Lee', - img: avatar2, - imgHeight: 22, - imgWidth: 22 - }, - { - title: 'Shellie', - img: avatar3, - imgHeight: 22, - imgWidth: 22 - } -] - -const TableSmall = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableSmall diff --git a/src/views/tables/reactstrap/TableSourceCode.js b/src/views/tables/reactstrap/TableSourceCode.js deleted file mode 100644 index 40fd5cb..0000000 --- a/src/views/tables/reactstrap/TableSourceCode.js +++ /dev/null @@ -1,3084 +0,0 @@ -export const tableBasic = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Lilian',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Alberto',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Bruce',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Diana',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Rey',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'James',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Lee',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Mario',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Oswald',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Christie',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Barnes',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Arthur',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const TableBasic = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableBasic
-`}
-
-) - -export const tableDark = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Levi',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Nina',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Brynn',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Liberty',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Fallon',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Minerva',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Palmer',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Tana',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Evangeline',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Winter',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Carl',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Andrew',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const TableDark = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableDark
-`}
-
-) - -export const tableTheadOptions = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Adara',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Kalia ',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Oliver',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Tyler',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Hanae',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Brynn',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Tate',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Norman',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Lana',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Emerald',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Sebastian',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Jamal',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-// Change class to thead-light for light variant
-const TableTheadDark = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableTheadDark`}
-
-) - -export const tableStriped = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Gretchen',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Hunter',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Allistair',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Macy',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Eve',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Damian',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Jade',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Destiny',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Cade',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Bruno',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Griffin',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Anthony',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const TableStriped = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableStriped
-`}
-
-) - -export const tableStripedDark = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Galvin',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Malcolm',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Leo',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Nola',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Brett',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Harper',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Jamalia',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Arden',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Laith',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Kirby',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Forrest',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Jordan',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-const TableStripedDark = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableStripedDark
-`}
-
-) - -export const tableBorderless = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Sarah',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Ainsley',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Charissa',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Vanna',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Inga',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Patricia',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Justina',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Lamar',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Briar',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Jenette',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Francis',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Isaac',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const TableBorderless = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableBorderless
-`}
-
-) - -export const tableBordered = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Leslie',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Quinn',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Quinn',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Felicia',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Brent',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Patricia',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Breanna',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Peter',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Cherokee',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Martina',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Butcher',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Noel',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const TableBordered = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableBordered
-`}
-
-) - -export const tableHover = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Griffith',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Hu',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Felicia',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Quinlan',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Patrick',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Castor',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Mohammad',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Isabella',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Michael',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Lavinia',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Nelle',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Virginia',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const TableHover = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableHover
-`}
-
-) - -export const tableSmall = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Melissa',
-    img: avatar1,
-    imgHeight: 22,
-    imgWidth: 22
-  },
-  {
-    title: 'Jana',
-    img: avatar2,
-    imgHeight: 22,
-    imgWidth: 22
-  },
-  {
-    title: 'Halla',
-    img: avatar3,
-    imgHeight: 22,
-    imgWidth: 22
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Wing',
-    img: avatar1,
-    imgHeight: 22,
-    imgWidth: 22
-  },
-  {
-    title: 'Octavia',
-    img: avatar2,
-    imgHeight: 22,
-    imgWidth: 22
-  },
-  {
-    title: 'Benedict',
-    img: avatar3,
-    imgHeight: 22,
-    imgWidth: 22
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Jade',
-    img: avatar1,
-    imgHeight: 22,
-    imgWidth: 22
-  },
-  {
-    title: 'Alisa',
-    img: avatar2,
-    imgHeight: 22,
-    imgWidth: 22
-  },
-  {
-    title: 'Alisa',
-    img: avatar3,
-    imgHeight: 22,
-    imgWidth: 22
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Alexa',
-    img: avatar1,
-    imgHeight: 22,
-    imgWidth: 22
-  },
-  {
-    title: 'Lee',
-    img: avatar2,
-    imgHeight: 22,
-    imgWidth: 22
-  },
-  {
-    title: 'Shellie',
-    img: avatar3,
-    imgHeight: 22,
-    imgWidth: 22
-  }
-]
-
-const TableSmall = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableSmall
-`}
-
-) - -export const tableContextual = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import figma from '@src/assets/images/icons/figma.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Illiana',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Wyatt',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Troy',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Mufutau',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Denton',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Carol',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Kyla',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Hop',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Yvonne',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Lunea',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Francis',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Kameko',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData5 = [
-  {
-    title: 'Blair',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Aspen',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Tyler',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData6 = [
-  {
-    title: 'Florence',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Kieran',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Anthony',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData7 = [
-  {
-    title: 'Lysandra',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Russell',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Curran',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData8 = [
-  {
-    title: 'Britanney',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Avye',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Castor',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData9 = [
-  {
-    title: 'Charissa',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Elijah',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Giacomo',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData10 = [
-  {
-    title: 'Chaim',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Virginia',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Kristen',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const TableContextual = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            figma
-            Figma Project
-          Ronnie Shane
-            {' '}
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            angular
-            Angular Project
-          Peter Charls
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            figma
-            Figma Project
-          Janne Ale
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Custom
-          Ted Richer
-            
-          
-            
-              Schedule
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Latest Bootstrap
-          Perry Parker
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            angular
-            Angular UI
-          Ana Bell
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap UI
-          Jerry Milton
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableContextual
-`}
-
-) - -export const tableResponsive = ( - 
-    {`
-import { Table } from 'reactstrap'
-
-const TableResponsive = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-          
-        
-      
-    

-            #
-          
-            Heading 1
-          
-            Heading 2
-          
-            Heading 3
-          
-            Heading 4
-          
-            Heading 5
-          
-            Heading 6
-          
-            Heading 7
-          
-            Heading 8
-          
-            Heading 9
-          
-            Heading 10
-          
-            Heading 11
-          
-            Heading 12
-          
-            Heading 13
-          
1Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell
4Table cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell

-  )
-}
-
-export default TableResponsive
-`}
-
-) - -export const tableHoverAnimation = ( - 
-    {`
-import AvatarGroup from '@components/avatar-group'
-import react from '@src/assets/images/icons/react.svg'
-import vuejs from '@src/assets/images/icons/vuejs.svg'
-import angular from '@src/assets/images/icons/angular.svg'
-import bootstrap from '@src/assets/images/icons/bootstrap.svg'
-import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg'
-import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
-import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
-import { MoreVertical, Edit, Trash } from 'react-feather'
-import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap'
-
-const avatarGroupData1 = [
-  {
-    title: 'Yoshi',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Kevyn',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Louis',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData2 = [
-  {
-    title: 'Aileen',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Karleigh',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Elmo',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData3 = [
-  {
-    title: 'Blossom',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Jescie',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Gemma',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const avatarGroupData4 = [
-  {
-    title: 'Thor',
-    img: avatar1,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Jack',
-    img: avatar2,
-    imgHeight: 26,
-    imgWidth: 26
-  },
-  {
-    title: 'Reece',
-    img: avatar3,
-    imgHeight: 26,
-    imgWidth: 26
-  }
-]
-
-const TableHoverAnimation = () => {
-  return (
-    
-      
-        
-          
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-          
-        
-      
-    
ProjectClientUsersStatusActions

-            angular
-            Angular Project
-          Peter Charles
-            
-          
-            
-              Active
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            react
-            React Project
-          Ronald Frest
-            
-          
-            
-              Completed
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            vuejs
-            Vuejs Project
-          Jack Obes
-            
-          
-            
-              Scheduled
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-            bootstrap
-            Bootstrap Project
-          Jerry Milton
-            
-          
-            
-              Pending
-            
-          
-            
-              
-                
-              
-              
-                 e.preventDefault()}>
-                   Edit
-                
-                 e.preventDefault()}>
-                   Delete
-                
-              
-            
-          

-  )
-}
-
-export default TableHoverAnimation
-`}
-
-) diff --git a/src/views/tables/reactstrap/TableStriped.js b/src/views/tables/reactstrap/TableStriped.js deleted file mode 100644 index 5df3dca..0000000 --- a/src/views/tables/reactstrap/TableStriped.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Gretchen', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Hunter', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Allistair', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Macy', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Eve', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Damian', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Jade', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Destiny', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Cade', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Bruno', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Griffin', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Anthony', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableStriped = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableStriped diff --git a/src/views/tables/reactstrap/TableStripedDark.js b/src/views/tables/reactstrap/TableStripedDark.js deleted file mode 100644 index 0396b51..0000000 --- a/src/views/tables/reactstrap/TableStripedDark.js +++ /dev/null @@ -1,233 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Galvin', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Malcolm', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Leo', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Nola', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Brett', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Harper', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Jamalia', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Arden', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Laith', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Kirby', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Forrest', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Jordan', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] -const TableStripedDark = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableStripedDark diff --git a/src/views/tables/reactstrap/TableTheadDark.js b/src/views/tables/reactstrap/TableTheadDark.js deleted file mode 100644 index 5011d30..0000000 --- a/src/views/tables/reactstrap/TableTheadDark.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Adara', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Kalia ', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Oliver', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Tyler', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Hanae', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Brynn', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Tate', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Norman', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Lana', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Emerald', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Sebastian', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Jamal', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableTheadDark = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableTheadDark diff --git a/src/views/tables/reactstrap/TableTheadLight.js b/src/views/tables/reactstrap/TableTheadLight.js deleted file mode 100644 index 01cc270..0000000 --- a/src/views/tables/reactstrap/TableTheadLight.js +++ /dev/null @@ -1,234 +0,0 @@ -import AvatarGroup from '@components/avatar-group' -import react from '@src/assets/images/icons/react.svg' -import vuejs from '@src/assets/images/icons/vuejs.svg' -import angular from '@src/assets/images/icons/angular.svg' -import bootstrap from '@src/assets/images/icons/bootstrap.svg' -import avatar1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import avatar2 from '@src/assets/images/portrait/small/avatar-s-6.jpg' -import avatar3 from '@src/assets/images/portrait/small/avatar-s-7.jpg' -import { MoreVertical, Edit, Trash } from 'react-feather' -import { Table, Badge, UncontrolledDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap' - -const avatarGroupData1 = [ - { - title: 'Aristotle', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Nolan ', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Baxter', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData2 = [ - { - title: 'Zane', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Tatum', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Rae', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData3 = [ - { - title: 'Rhiannon', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'William', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Vaughan', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const avatarGroupData4 = [ - { - title: 'Unity', - img: avatar1, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Emerson', - img: avatar2, - imgHeight: 26, - imgWidth: 26 - }, - { - title: 'Ima', - img: avatar3, - imgHeight: 26, - imgWidth: 26 - } -] - -const TableTheadLight = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProjectClientUsersStatusActions
- angular - Angular Project - Peter Charles - - - - Active - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- react - React Project - Ronald Frest - - - - Completed - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- vuejs - Vuejs Project - Jack Obes - - - - Scheduled - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- bootstrap - Bootstrap Project - Jerry Milton - - - - Pending - - - - - - - - e.preventDefault()}> - Edit - - e.preventDefault()}> - Delete - - - -
- ) -} - -export default TableTheadLight diff --git a/src/views/tables/reactstrap/index.js b/src/views/tables/reactstrap/index.js deleted file mode 100644 index 7781a9d..0000000 --- a/src/views/tables/reactstrap/index.js +++ /dev/null @@ -1,175 +0,0 @@ -import { Fragment, useEffect } from 'react' -import { Row, Col, CardBody, CardText } from 'reactstrap' -import prism from 'prismjs' -import TableBasic from './TableBasic' -import TableDark from './TableDark' -import TableTheadDark from './TableTheadDark' -import TableTheadLight from './TableTheadLight' -import TableStriped from './TableStriped' -import TableStripedDark from './TableStripedDark' -import TableBordered from './TableBordered' -import TableBorderless from './TableBorderless' -import TableHover from './TableHover' -import TableSmall from './TableSmall' -import TableContextual from './TableContextual' -import TableResponsive from './TableResponsive' -import TableHoverAnimation from './TableHoverAnimation' -import Breadcrumbs from '@components/breadcrumbs' -import Card from '@components/card-snippet' -import { - tableBasic, - tableDark, - tableTheadOptions, - tableStriped, - tableStripedDark, - tableBordered, - tableBorderless, - tableContextual, - tableHover, - tableSmall, - tableHoverAnimation, - tableResponsive -} from './TableSourceCode' - -const Tables = () => { - useEffect(() => { - prism.highlightAll() - }) - - return ( - - - - - - - - - - - - - Use prop dark to create a dark inverted table. - - - - - - - - - - Similar to tables and dark tables, use the modifier classes .thead-dark - to make <thead> appear dark. - - - - -

- Use the modifier class .thead-light to make - <thead>s appear light. -

- - - - - - - - - Use prop striped to create a striped table. - - - - - - - - - - Use props striped & dark to create a dark striped table. - - - - - - - - - - Use prop bordered to create a bordered table. - - - - - - - - - - Use prop borderless to create a borderless table. - - - - - - - - - - Use prop hover to create a hoverable table. - - - - - - - - - - Use prop size="sm" to create a small table. - - - - - - - - - - Use class table-[colorName] with <tr> for contextual rows. - - - - - - -
Table without card
- - - - - - - Use prop responsive to make your table responsive. - - - - - - - - - - Use class table-hover-animation for Table Hover Animation. - - - - - - - - ) -} - -export default Tables diff --git a/src/views/ui-elements/cards/actions/index.js b/src/views/ui-elements/cards/actions/index.js deleted file mode 100644 index 0f55edf..0000000 --- a/src/views/ui-elements/cards/actions/index.js +++ /dev/null @@ -1,110 +0,0 @@ -import { Fragment } from 'react' -import Breadcrumbs from '@components/breadcrumbs' -import CardAction from '@components/card-actions' -import { ChevronDown, RotateCw, X } from 'react-feather' -import { CardBody, CardText, Row, Col, Table } from 'reactstrap' - -const CardActions = () => { - return ( - - - - - { - setTimeout(() => endLoading(), 2000) - }} - > - - - - - - - - - - - - - - - - - - - - - - - - - - -
ActionIconDetails
Collapse - - Collapse card content using collapse action.
Refresh Content - - Refresh your card content using refresh action.
Remove Card - - Remove card from page using remove card action
- - - - - - - - - - You can create a collapsible content by using our - CardAction component and by passing prop - actions='collapse'. - - - Click on to see card collapse in action - - - - - - { - setTimeout(() => endLoading(), 2000) - }} - > - - - To create a re-loadable card pass prop - actions='reload' and pass prop endReload - to end the loading. - - - Click on to see card refresh in action - - - - - - - - - You can add refresh content action to card by adding class - .card-reload with your card tag, and add conditional spinner into card body to show when - card is refreshing. - - - Click on to see card refresh in action - - - - - - - ) -} -export default CardActions diff --git a/src/views/ui-elements/cards/advance/CardAppDesign.js b/src/views/ui-elements/cards/advance/CardAppDesign.js deleted file mode 100644 index 2a854a2..0000000 --- a/src/views/ui-elements/cards/advance/CardAppDesign.js +++ /dev/null @@ -1,92 +0,0 @@ -import classnames from 'classnames' -import Avatar from '@components/avatar' -import { Card, CardTitle, CardBody, CardText, Badge, Button } from 'reactstrap' - -const CardAppDesign = () => { - const avatarArr = [ - { - img: require('@src/assets/images/portrait/small/avatar-s-9.jpg').default, - imgHeight: 34, - imgWidth: 34 - }, - { - content: 'PI', - color: 'light-danger' - }, - { - img: require('@src/assets/images/portrait/small/avatar-s-14.jpg').default, - imgHeight: 34, - imgWidth: 34 - }, - { - img: require('@src/assets/images/portrait/small/avatar-s-7.jpg').default, - imgHeight: 34, - imgWidth: 34 - }, - { - content: 'AL', - color: 'light-secondary' - } - ] - - const designPlanningArr = [ - { - title: 'Due Date', - subtitle: '12 Apr, 21' - }, - { - title: 'Budget', - subtitle: '$49251.91' - }, - { - title: 'Cost', - subtitle: '$840.99' - } - ] - - return ( - - - 03 Sep, 20 - App design - - You can Find Only Post and Quotes Related to IOS like ipad app design, iphone app design - -
-
Team
- - Figma - - Wireframe -
-
-
Members
- {avatarArr.map((obj, index) => { - return ( - - ) - })} -
-
- {designPlanningArr.map(item => ( -
- {item.title} -
{item.subtitle}
-
- ))} -
- - Join Team - - - - ) -} - -export default CardAppDesign diff --git a/src/views/ui-elements/cards/advance/CardBrowserState.js b/src/views/ui-elements/cards/advance/CardBrowserState.js deleted file mode 100644 index 0ee3d32..0000000 --- a/src/views/ui-elements/cards/advance/CardBrowserState.js +++ /dev/null @@ -1,291 +0,0 @@ -import Chart from 'react-apexcharts' -import { MoreVertical } from 'react-feather' -import { - Card, - CardHeader, - CardTitle, - CardBody, - CardText, - Media, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle -} from 'reactstrap' - -const CardBrowserState = ({ colors, trackBgColor }) => { - const statesArr = [ - { - avatar: require('@src/assets/images/icons/google-chrome.png').default, - title: 'Google Chrome', - value: '54.4%', - chart: { - type: 'radialBar', - series: [54.4], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.primary.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/icons/mozila-firefox.png').default, - title: 'Mozila Firefox', - value: '6.1%', - chart: { - type: 'radialBar', - series: [6.1], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.warning.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/icons/apple-safari.png').default, - title: 'Apple Safari', - value: '14.6%', - chart: { - type: 'radialBar', - series: [14.6], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.secondary.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/icons/internet-explorer.png').default, - title: 'Internet Explorer', - value: '4.2%', - chart: { - type: 'radialBar', - series: [4.2], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.info.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/icons/opera.png').default, - title: 'Opera Mini', - value: '8.4%', - chart: { - type: 'radialBar', - series: [8.4], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.danger.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - } - ] - - const renderStates = () => { - return statesArr.map(state => { - return ( -
- - {state.title} -
{state.title}
- -
-
{state.value}
- -
-
- ) - }) - } - - return ( - - -
- Browser States - Counter August 2020 -
- - - - - - Last 28 Days - Last Month - Last Year - - - - {renderStates()} - - ) -} - -export default CardBrowserState diff --git a/src/views/ui-elements/cards/advance/CardBusiness.js b/src/views/ui-elements/cards/advance/CardBusiness.js deleted file mode 100644 index 22601f5..0000000 --- a/src/views/ui-elements/cards/advance/CardBusiness.js +++ /dev/null @@ -1,70 +0,0 @@ -import { MoreVertical } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody, CardText, CustomInput, Badge, Button } from 'reactstrap' - -const CardBusiness = () => { - const dataArr = [ - { - id: 'option-1', - title: 'Option #1', - badgeColor: 'light-success', - amount: '+$39' - }, - { - id: 'option-2', - title: 'Option #2', - badgeColor: 'light-primary', - amount: '+$85', - checked: true - }, - { - id: 'option-3', - title: 'Option #3', - badgeColor: 'light-success', - amount: '+$199' - }, - { - id: 'option-4', - title: 'Option #4', - badgeColor: 'light-success', - amount: '+$459' - } - ] - - const renderOptions = () => { - return dataArr.map(item => { - return ( -
-
- - {item.amount} -
-
- ) - }) - } - - return ( - - - For Business Sharks - - - - Here, i focus ona range of items and featured that we use in life without giving them -
Basic price is $130
-
{renderOptions()}
- - Purchase - - - - ) -} - -export default CardBusiness diff --git a/src/views/ui-elements/cards/advance/CardChat.js b/src/views/ui-elements/cards/advance/CardChat.js deleted file mode 100644 index eae81e7..0000000 --- a/src/views/ui-elements/cards/advance/CardChat.js +++ /dev/null @@ -1,196 +0,0 @@ -import classnames from 'classnames' -import Avatar from '@components/avatar' -import { useState, useEffect } from 'react' -import PerfectScrollbar from 'react-perfect-scrollbar' -import { MoreVertical, Send, Image } from 'react-feather' -import { Card, CardHeader, Form, Label, InputGroup, InputGroupAddon, Input, InputGroupText, Button } from 'reactstrap' - -import profilePic from '@src/assets/images/portrait/small/avatar-s-11.jpg' - -import '@styles/base/pages/app-chat-list.scss' - -const data = { - chat: { - id: 2, - userId: 1, - unseenMsgs: 0, - chat: [ - { - message: "How can we help? We're here for you!", - time: 'Mon Dec 10 2018 07:45:00 GMT+0000 (GMT)', - senderId: 11 - }, - { - message: 'Hey John, I am looking for the best admin template. Could you please help me to find it out?', - time: 'Mon Dec 10 2018 07:45:23 GMT+0000 (GMT)', - senderId: 1 - }, - { - message: 'It should be Bootstrap 4 compatible.', - time: 'Mon Dec 10 2018 07:45:55 GMT+0000 (GMT)', - senderId: 1 - }, - { message: 'Absolutely!', time: 'Mon Dec 10 2018 07:46:00 GMT+0000 (GMT)', senderId: 11 }, - { - message: 'Modern admin is the responsive bootstrap 4 admin template.!', - time: 'Mon Dec 10 2018 07:46:05 GMT+0000 (GMT)', - senderId: 11 - }, - { message: 'Looks clean and fresh UI.', time: 'Mon Dec 10 2018 07:46:23 GMT+0000 (GMT)', senderId: 1 }, - { message: "It's perfect for my next project.", time: 'Mon Dec 10 2018 07:46:33 GMT+0000 (GMT)', senderId: 1 }, - { message: 'How can I purchase it?', time: 'Mon Dec 10 2018 07:46:43 GMT+0000 (GMT)', senderId: 1 }, - { message: 'Thanks, from ThemeForest.', time: 'Mon Dec 10 2018 07:46:53 GMT+0000 (GMT)', senderId: 11 }, - { message: 'I will purchase it for sure. 👍', time: '2020-12-08T13:52:38.013Z', senderId: 1 } - ] - }, - contact: { - id: 1, - fullName: 'Felecia Rower', - avatar: require('@src/assets/images/portrait/small/avatar-s-20.jpg').default, - status: 'away' - } -} - -const CardChat = () => { - const [msg, setMsg] = useState('') - const [chatRef, setChatRef] = useState(null) - const [chatData, setChatData] = useState(data) - - //** Formats chat data based on sender - const formattedChatData = () => { - let chatLog = [] - if (chatData) { - chatLog = chatData.chat.chat - } - - const formattedChatLog = [] - let chatMessageSenderId = chatLog[0] ? chatLog[0].senderId : undefined - let msgGroup = { - senderId: chatMessageSenderId, - messages: [] - } - chatLog.forEach((msg, index) => { - if (chatMessageSenderId === msg.senderId) { - msgGroup.messages.push({ - msg: msg.message, - time: msg.time - }) - } else { - chatMessageSenderId = msg.senderId - formattedChatLog.push(msgGroup) - msgGroup = { - senderId: msg.senderId, - messages: [ - { - msg: msg.message, - time: msg.time - } - ] - } - } - if (index === chatLog.length - 1) formattedChatLog.push(msgGroup) - }) - return formattedChatLog - } - - //** Renders user chat - const renderChats = () => { - return formattedChatData().map((item, index) => { - return ( -
-
- -
- -
- {item.messages.map(chat => ( -
-

{chat.msg}

-
- ))} -
-
- ) - }) - } - - //** Scroll to chat bottom - const scrollToBottom = () => { - chatRef.scrollTop = Number.MAX_SAFE_INTEGER - } - - useEffect(() => { - if (chatRef !== null) { - scrollToBottom() - } - }, [chatRef, chatData.chat.chat.length]) - - const handleSendMsg = e => { - e.preventDefault() - if (msg.trim().length) { - const newMsg = chatData - - newMsg.chat.chat.push({ - message: msg, - time: new Date(), - senderId: 11 - }) - - setChatData(newMsg) - setMsg('') - } - } - - return ( - - -
- -
Carrie Hawkins
-
- - -
- setChatRef(el)} - className='user-chats scroll-area' - options={{ wheelPropagation: false }} - > -
{renderChats()}
- -
handleSendMsg(e)}> - - - - - - - setMsg(e.target.value)} - placeholder='Type your message' - /> - - -
-
- - ) -} - -export default CardChat diff --git a/src/views/ui-elements/cards/advance/CardCongratulations.js b/src/views/ui-elements/cards/advance/CardCongratulations.js deleted file mode 100644 index bc62472..0000000 --- a/src/views/ui-elements/cards/advance/CardCongratulations.js +++ /dev/null @@ -1,25 +0,0 @@ -import { Award } from 'react-feather' -import Avatar from '@components/avatar' -import { Card, CardBody, CardText } from 'reactstrap' -import decorationLeft from '@src/assets/images/elements/decore-left.png' -import decorationRight from '@src/assets/images/elements/decore-right.png' - -const CardCongratulations = () => { - return ( - - - decor-left - decor-right - } className='shadow' color='primary' size='xl' /> -
-

Congratulations John,

- - You have done 57.6% more sales today. Check your new badge in your profile. - -
- - - ) -} - -export default CardCongratulations diff --git a/src/views/ui-elements/cards/advance/CardEmployeesTask.js b/src/views/ui-elements/cards/advance/CardEmployeesTask.js deleted file mode 100644 index eed6221..0000000 --- a/src/views/ui-elements/cards/advance/CardEmployeesTask.js +++ /dev/null @@ -1,323 +0,0 @@ -import Chart from 'react-apexcharts' -import Avatar from '@components/avatar' -import { MoreVertical } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody, Media } from 'reactstrap' - -const CardEmployeesTasks = ({ colors, trackBgColor }) => { - const employeesTasks = [ - { - avatar: require('@src/assets/images/portrait/small/avatar-s-9.jpg').default, - title: 'Ryan Harrington', - subtitle: 'iOS Developer', - time: '9hr 20m', - chart: { - type: 'radialBar', - series: [45], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.primary.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/portrait/small/avatar-s-20.jpg').default, - title: 'Louisa Norton', - subtitle: 'UI Designer', - time: '4hr 17m', - chart: { - type: 'radialBar', - series: [65], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.danger.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/portrait/small/avatar-s-1.jpg').default, - title: 'Jayden Duncan', - subtitle: 'Java Developer', - time: '12hr 8m', - chart: { - type: 'radialBar', - series: [60], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.success.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/portrait/small/avatar-s-20.jpg').default, - title: 'Cynthia Howell', - subtitle: 'Angular Developer', - time: '3hr 19m', - chart: { - type: 'radialBar', - series: [35], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.secondary.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/portrait/small/avatar-s-16.jpg').default, - title: 'Helena Payne', - subtitle: 'Marketing', - time: '9hr 50m', - chart: { - type: 'radialBar', - series: [65], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.warning.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - }, - { - avatar: require('@src/assets/images/portrait/small/avatar-s-13.jpg').default, - title: 'Troy Jensen', - subtitle: 'iOS Developer', - time: '4hr 48m', - chart: { - type: 'radialBar', - series: [80], - height: 30, - width: 30, - options: { - grid: { - show: false, - padding: { - left: -15, - right: -15, - top: -12, - bottom: -15 - } - }, - colors: [colors.primary.main], - plotOptions: { - radialBar: { - hollow: { - size: '22%' - }, - track: { - background: trackBgColor - }, - dataLabels: { - showOn: 'always', - name: { - show: false - }, - value: { - show: false - } - } - } - }, - stroke: { - lineCap: 'round' - } - } - } - } - ] - - const renderTasks = () => { - return employeesTasks.map(task => { - return ( -
- - - -
{task.title}
- {task.subtitle} - - -
- {task.time} - -
-
- ) - }) - } - - return ( - - - Employee Task - - - {renderTasks()} - - ) -} - -export default CardEmployeesTasks diff --git a/src/views/ui-elements/cards/advance/CardJob.js b/src/views/ui-elements/cards/advance/CardJob.js deleted file mode 100644 index f8ec8e8..0000000 --- a/src/views/ui-elements/cards/advance/CardJob.js +++ /dev/null @@ -1,48 +0,0 @@ -import Avatar from '@components/avatar' -import { Card, CardBody, CardText, Button, Badge, Media } from 'reactstrap' -import profileImg from '@src/assets/images/portrait/small/avatar-s-7.jpg' - -const CardJob = () => { - return ( - - -
- - - -
Mittie Evans
- Updated 12m ago - - - - Design - -
-
Need a designer to form branding essentials for my business.
- - Design high-quality designs, graphics, mock-ups and layouts for both new and existing web sites/ web - applications / mobile applications. - -
-
- - $ - -

9,800

- - / month - -
- - Full Time - -
- - - - ) -} - -export default CardJob diff --git a/src/views/ui-elements/cards/advance/CardMedal.js b/src/views/ui-elements/cards/advance/CardMedal.js deleted file mode 100644 index caf5d5b..0000000 --- a/src/views/ui-elements/cards/advance/CardMedal.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Card, CardBody, CardText, Button } from 'reactstrap' -import medal from '@src/assets/images/illustration/badge.svg' - -const CardMedal = () => { - return ( - - -
Congratulations 🎉 John!
- You have won gold medal -

- e.preventDefault()}> - $48.9k - -

- View Sales - Medal Pic - - - ) -} - -export default CardMedal diff --git a/src/views/ui-elements/cards/advance/CardMeetup.js b/src/views/ui-elements/cards/advance/CardMeetup.js deleted file mode 100644 index 437bce3..0000000 --- a/src/views/ui-elements/cards/advance/CardMeetup.js +++ /dev/null @@ -1,87 +0,0 @@ -import Avatar from '@components/avatar' -import { Calendar, MapPin } from 'react-feather' -import AvatarGroup from '@components/avatar-group' -import { Card, CardTitle, CardBody, CardText, Media } from 'reactstrap' -import illustration from '@src/assets/images/illustration/email.svg' - -const CardMeetup = () => { - const data = [ - { - title: 'Billy Hopkins', - placement: 'bottom', - img: require('@src/assets/images/portrait/small/avatar-s-9.jpg').default, - imgHeight: 33, - imgWidth: 33 - }, - { - title: 'Amy Carson', - placement: 'bottom', - img: require('@src/assets/images/portrait/small/avatar-s-6.jpg').default, - imgHeight: 33, - imgWidth: 33 - }, - { - title: 'Brandon Miles', - placement: 'bottom', - img: require('@src/assets/images/portrait/small/avatar-s-8.jpg').default, - imgHeight: 33, - imgWidth: 33 - }, - { - title: 'Daisy Weber', - placement: 'bottom', - img: require('@src/assets/images/portrait/small/avatar-s-7.jpg').default, - imgHeight: 33, - imgWidth: 33 - }, - { - title: 'Jenny Looper', - placement: 'bottom', - img: require('@src/assets/images/portrait/small/avatar-s-20.jpg').default, - imgHeight: 33, - imgWidth: 33 - }, - { - meta: '+42' - } - ] - - return ( - -
- -
- -
-
-
THU
-

24

-
-
- - Developer Meetup - - Meet world popular developers -
-
- - } /> - -
Sat, May 25, 2020
- 10:AM to 6:PM - - - - } /> - -
Central Park
- Manhattan, New york City - - - - - - ) -} - -export default CardMeetup diff --git a/src/views/ui-elements/cards/advance/CardPayment.js b/src/views/ui-elements/cards/advance/CardPayment.js deleted file mode 100644 index 9f8224b..0000000 --- a/src/views/ui-elements/cards/advance/CardPayment.js +++ /dev/null @@ -1,62 +0,0 @@ -import Cleave from 'cleave.js/react' -import { Card, CardHeader, CardTitle, CardBody, Form, FormGroup, Label, Input, Button, Row, Col } from 'reactstrap' - -const CardPayment = () => { - return ( - - - Pay Amount - - $455.60 - - - -
e.preventDefault()}> - - - - - - - - - - - - - - - - - - - - - - - - - - - - Make Payment - - - -
- - - ) -} - -export default CardPayment diff --git a/src/views/ui-elements/cards/advance/CardProfile.js b/src/views/ui-elements/cards/advance/CardProfile.js deleted file mode 100644 index 58d6f09..0000000 --- a/src/views/ui-elements/cards/advance/CardProfile.js +++ /dev/null @@ -1,41 +0,0 @@ -import Avatar from '@components/avatar' -import coverImg from '@src/assets/images/banner/banner-12.jpg' -import { Card, CardBody, CardImg, Badge } from 'reactstrap' -import profileImg from '@src/assets/images/portrait/small/avatar-s-9.jpg' - -const CardProfile = () => { - return ( - - - -
-
- -
-
-

Curtis Stone

-
Malaysia
- - Pro Level - -
-
-
-
Followers
-

10.3k

-
-
-
Projects
-

156

-
-
-
Rank
-

23

-
-
- - - ) -} - -export default CardProfile diff --git a/src/views/ui-elements/cards/advance/CardTransactions.js b/src/views/ui-elements/cards/advance/CardTransactions.js deleted file mode 100644 index 8eb53a1..0000000 --- a/src/views/ui-elements/cards/advance/CardTransactions.js +++ /dev/null @@ -1,74 +0,0 @@ -import Avatar from '@components/avatar' -import * as Icon from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody, Media } from 'reactstrap' - -const CardTransactions = () => { - const transactionsArr = [ - { - title: 'Wallet', - color: 'light-primary', - subtitle: 'Starbucks', - amount: '- $74', - Icon: Icon['Pocket'], - down: true - }, - { - title: 'Bank Transfer', - color: 'light-success', - subtitle: 'Add Money', - amount: '+ $480', - Icon: Icon['Check'] - }, - { - title: 'Paypal', - color: 'light-danger', - subtitle: 'Add Money', - amount: '+ $590', - Icon: Icon['DollarSign'] - }, - { - title: 'Mastercard', - color: 'light-warning', - subtitle: 'Ordered Food', - amount: '- $12', - Icon: Icon['CreditCard'], - down: true - }, - { - title: 'Transfer', - color: 'light-info', - subtitle: 'Refund', - amount: '+ $98', - Icon: Icon['TrendingUp'] - } - ] - - const renderTransactions = () => { - return transactionsArr.map(item => { - return ( -
- - } /> - -
{item.title}
- {item.subtitle} - - -
{item.amount}
-
- ) - }) - } - - return ( - - - Transactions - - - {renderTransactions()} - - ) -} - -export default CardTransactions diff --git a/src/views/ui-elements/cards/advance/CardUserTimeline.js b/src/views/ui-elements/cards/advance/CardUserTimeline.js deleted file mode 100644 index 6760eb5..0000000 --- a/src/views/ui-elements/cards/advance/CardUserTimeline.js +++ /dev/null @@ -1,112 +0,0 @@ -import Avatar from '@components/avatar' -import Timeline from '@components/timeline' -import AvatarGroup from '@components/avatar-group' -import { List, MoreVertical } from 'react-feather' -import jsonImg from '@src/assets/images/icons/json.png' -import ceo from '@src/assets/images/portrait/small/avatar-s-9.jpg' -import { Card, CardHeader, CardTitle, CardBody, Media } from 'reactstrap' - -const avatarGroupArr = [ - { - title: 'Billy Hopkins', - img: require('@src/assets/images/portrait/small/avatar-s-9.jpg').default, - placement: 'bottom', - imgHeight: 33, - imgWidth: 33 - }, - { - title: 'Amy Carson', - img: require('@src/assets/images/portrait/small/avatar-s-6.jpg').default, - placement: 'bottom', - imgHeight: 33, - imgWidth: 33 - }, - { - title: 'Brandon Miles', - img: require('@src/assets/images/portrait/small/avatar-s-8.jpg').default, - placement: 'bottom', - imgHeight: 33, - imgWidth: 33 - }, - { - title: 'Daisy Weber', - img: require('@src/assets/images/portrait/small/avatar-s-7.jpg').default, - placement: 'bottom', - imgHeight: 33, - imgWidth: 33 - }, - { - title: 'Jenny Looper', - img: require('@src/assets/images/portrait/small/avatar-s-20.jpg').default, - placement: 'bottom', - imgHeight: 33, - imgWidth: 33 - } -] - -const data = [ - { - title: '12 Invoices have been paid', - content: 'Invoices have been paid to the company.', - meta: '12 min ago', - metaClassName: 'mr-1', - customContent: ( - - data.json - - data.json - - - ) - }, - { - title: 'Client Meeting', - content: 'Project meeting with john @10:15am.', - meta: '45 min ago', - metaClassName: 'mr-1', - color: 'warning', - customContent: ( - - - -
John Doe (Client)
- CEO of Infibeam - - - ) - }, - { - title: 'Create a new project for client', - content: 'Add files to new design folder', - color: 'info', - meta: '2 days ago', - metaClassName: 'mr-1', - customContent: - }, - { - title: 'Create a new project for client', - content: 'Add files to new design folder', - color: 'danger', - meta: '5 days ago', - metaClassName: 'mr-1' - } -] - -const UserTimeline = () => { - return ( - - -
- - User Timeline -
- - - - - - - ) -} - -export default UserTimeline diff --git a/src/views/ui-elements/cards/advance/index.js b/src/views/ui-elements/cards/advance/index.js deleted file mode 100644 index b5954c3..0000000 --- a/src/views/ui-elements/cards/advance/index.js +++ /dev/null @@ -1,74 +0,0 @@ -import { Fragment, useContext } from 'react' -import { Row, Col } from 'reactstrap' -import CardJob from './CardJob' -import CardChat from './CardChat' -import CardMedal from './CardMedal' -import CardMeetup from './CardMeetup' -import CardPayment from './CardPayment' -import CardProfile from './CardProfile' -import CardBusiness from './CardBusiness' -import CardAppDesign from './CardAppDesign' -import CardUserTimeline from './CardUserTimeline' -import CardBrowserState from './CardBrowserState' -import Breadcrumbs from '@components/breadcrumbs' -import CardTransactions from './CardTransactions' -import CardEmployeesTasks from './CardEmployeesTask' -import CardCongratulations from './CardCongratulations' -import { ThemeColors } from '@src/utility/context/ThemeColors' - -const Cards = () => { - const { colors } = useContext(ThemeColors), - trackBgColor = '#e9ecef' - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default Cards diff --git a/src/views/ui-elements/cards/analytics/AvgSessions.js b/src/views/ui-elements/cards/analytics/AvgSessions.js deleted file mode 100644 index c8f20c2..0000000 --- a/src/views/ui-elements/cards/analytics/AvgSessions.js +++ /dev/null @@ -1,127 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { kFormatter } from '@utils' -import { - Card, - CardBody, - CardText, - Row, - Col, - Button, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle, - Progress -} from 'reactstrap' -import Chart from 'react-apexcharts' - -const AvgSessions = props => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-analytics/avg-sessions').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - sparkline: { enabled: true }, - toolbar: { show: false } - }, - grid: { - show: false, - padding: { - left: 0, - right: 0 - } - }, - states: { - hover: { - filter: 'none' - } - }, - colors: ['#ebf0f7', '#ebf0f7', props.primary, '#ebf0f7', '#ebf0f7', '#ebf0f7'], - plotOptions: { - bar: { - columnWidth: '45%', - distributed: true, - endingShape: 'rounded' - } - }, - tooltip: { - x: { show: false } - }, - xaxis: { - type: 'numeric' - } - }, - series = [ - { - name: 'Sessions', - data: [75, 125, 225, 175, 125, 75, 25] - } - ] - - return data !== null ? ( - - - - -
-

{kFormatter(data.sessions)}

- Avg Sessions -
- {data.growth} - vs last 7 days -
-
- - - - - - Last 7 days - - - {data.last_days.map(item => ( - - {item} - - ))} - - - - - -
- - -

Goal: ${data.goal}

- - - -

Users: {kFormatter(data.users)}

- - - -

Retention: {data.retention}%

- - - -

Duration: {data.duration}yr

- - - - - - ) : null -} -export default AvgSessions diff --git a/src/views/ui-elements/cards/analytics/Customers.js b/src/views/ui-elements/cards/analytics/Customers.js deleted file mode 100644 index 4f020af..0000000 --- a/src/views/ui-elements/cards/analytics/Customers.js +++ /dev/null @@ -1,92 +0,0 @@ -import { useEffect, useState } from 'react' -import classnames from 'classnames' -import axios from 'axios' -import { - Card, - CardHeader, - CardTitle, - CardBody, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle -} from 'reactstrap' -import * as Icon from 'react-feather' -import Chart from 'react-apexcharts' - -const Customers = props => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-analytics/customers').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - toolbar: { - show: false - } - }, - labels: ['New', 'Returning', 'Referrals'], - dataLabels: { - enabled: false - }, - legend: { show: false }, - stroke: { - width: 4 - }, - colors: [props.primary, props.warning, props.danger] - }, - series = [690, 258, 149] - - const renderChartInfo = () => { - return data.listData.map((item, index) => { - const IconTag = Icon[item.icon] - - return ( -
-
- - {item.text} -
- {item.result} -
- ) - }) - } - - return data !== null ? ( - - - Customers - - - Last 7 days - - - {data.last_days.map(item => ( - - {item} - - ))} - - - - - -
{renderChartInfo()}
- - - ) : null -} -export default Customers diff --git a/src/views/ui-elements/cards/analytics/Earnings.js b/src/views/ui-elements/cards/analytics/Earnings.js deleted file mode 100644 index 3352cda..0000000 --- a/src/views/ui-elements/cards/analytics/Earnings.js +++ /dev/null @@ -1,111 +0,0 @@ -import Chart from 'react-apexcharts' -import { Card, CardTitle, CardText, CardBody, Row, Col } from 'reactstrap' - -const Earnings = ({ success }) => { - const options = { - chart: { - toolbar: { - show: false - } - }, - dataLabels: { - enabled: false - }, - legend: { show: false }, - comparedResult: [2, -3, 8], - labels: ['App', 'Service', 'Product'], - stroke: { width: 0 }, - colors: ['#28c76f66', '#28c76f33', success], - grid: { - padding: { - right: -20, - bottom: -8, - left: -20 - } - }, - plotOptions: { - pie: { - startAngle: -10, - donut: { - labels: { - show: true, - name: { - offsetY: 15 - }, - value: { - offsetY: -15, - formatter(val) { - return `${parseInt(val)} %` - } - }, - total: { - show: true, - offsetY: 15, - label: 'App', - formatter(w) { - return '53%' - } - } - } - } - } - }, - responsive: [ - { - breakpoint: 1325, - options: { - chart: { - height: 100 - } - } - }, - { - breakpoint: 1200, - options: { - chart: { - height: 120 - } - } - }, - { - breakpoint: 1065, - options: { - chart: { - height: 100 - } - } - }, - { - breakpoint: 992, - options: { - chart: { - height: 120 - } - } - } - ] - } - - return ( - - - - - Earnings -
This Month
-
$4055.56
- - 68.2% - more earnings than last month. - - - - - - - - - ) -} - -export default Earnings diff --git a/src/views/ui-elements/cards/analytics/GoalOverview.js b/src/views/ui-elements/cards/analytics/GoalOverview.js deleted file mode 100644 index bafbb10..0000000 --- a/src/views/ui-elements/cards/analytics/GoalOverview.js +++ /dev/null @@ -1,99 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import Chart from 'react-apexcharts' -import { HelpCircle } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody, CardText, Row, Col } from 'reactstrap' - -const GoalOverview = props => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-analytics/goal-overview').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - sparkline: { - enabled: true - }, - dropShadow: { - enabled: true, - blur: 3, - left: 1, - top: 1, - opacity: 0.1 - } - }, - colors: ['#51e5a8'], - plotOptions: { - radialBar: { - offsetY: 10, - startAngle: -150, - endAngle: 150, - hollow: { - size: '77%' - }, - track: { - background: '#ebe9f1', - strokeWidth: '50%' - }, - dataLabels: { - name: { - show: false - }, - value: { - color: '#5e5873', - fontFamily: 'Montserrat', - fontSize: '2.86rem', - fontWeight: '600' - } - } - } - }, - fill: { - type: 'gradient', - gradient: { - shade: 'dark', - type: 'horizontal', - shadeIntensity: 0.5, - gradientToColors: [props.success], - inverseColors: true, - opacityFrom: 1, - opacityTo: 1, - stops: [0, 100] - } - }, - stroke: { - lineCap: 'round' - }, - grid: { - padding: { - bottom: 30 - } - } - }, - series = [83] - - return data !== null ? ( - - - Goal Overview - - - - - - - - Completed -

{data.completed}

- - - In Progress -

{data.inProgress}

- - - - ) : null -} -export default GoalOverview diff --git a/src/views/ui-elements/cards/analytics/ProductOrders.js b/src/views/ui-elements/cards/analytics/ProductOrders.js deleted file mode 100644 index c3750c3..0000000 --- a/src/views/ui-elements/cards/analytics/ProductOrders.js +++ /dev/null @@ -1,118 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { - Card, - CardHeader, - CardTitle, - CardBody, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle -} from 'reactstrap' -import Chart from 'react-apexcharts' -import { Circle } from 'react-feather' - -const ProductOrders = props => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-analytics/product-orders').then(res => setData(res.data)) - }, []) - - const options = { - labels: ['Finished', 'Pending', 'Rejected'], - plotOptions: { - radialBar: { - size: 150, - hollow: { - size: '20%' - }, - track: { - strokeWidth: '100%', - margin: 15 - }, - dataLabels: { - value: { - fontSize: '1rem', - colors: '#5e5873', - fontWeight: '500', - offsetY: 5 - }, - total: { - show: true, - label: 'Total', - fontSize: '1.286rem', - colors: '#5e5873', - fontWeight: '500', - - formatter() { - // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function - return 42459 - } - } - } - } - }, - colors: [props.primary, props.warning, props.danger], - stroke: { - lineCap: 'round' - }, - chart: { - height: 355, - dropShadow: { - enabled: true, - blur: 3, - left: 1, - top: 1, - opacity: 0.1 - } - } - }, - series = [70, 52, 26] - - return data !== null ? ( - - - Product Orders - - - Last 7 days - - - {data.last_days.map(item => ( - - {item} - - ))} - - - - - -
-
- - Finished -
- {data.chart_info.finished} -
-
-
- - Pending -
- {data.chart_info.pending} -
-
-
- - Rejected -
- {data.chart_info.rejected} -
- - - ) : null -} -export default ProductOrders diff --git a/src/views/ui-elements/cards/analytics/Revenue.js b/src/views/ui-elements/cards/analytics/Revenue.js deleted file mode 100644 index ef51ded..0000000 --- a/src/views/ui-elements/cards/analytics/Revenue.js +++ /dev/null @@ -1,127 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import Chart from 'react-apexcharts' -import { Settings } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody, CardText } from 'reactstrap' - -const Revenue = props => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-analytics/revenue').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - toolbar: { show: false }, - zoom: { enabled: false }, - type: 'line', - offsetX: -10 - }, - stroke: { - curve: 'smooth', - dashArray: [0, 12], - width: [4, 3] - }, - legend: { - show: false - }, - colors: ['#d0ccff', '#ebe9f1'], - fill: { - type: 'gradient', - gradient: { - shade: 'dark', - inverseColors: false, - gradientToColors: [props.primary, '#ebe9f1'], - shadeIntensity: 1, - type: 'horizontal', - opacityFrom: 1, - opacityTo: 1, - stops: [0, 100, 100, 100] - } - }, - markers: { - size: 0, - hover: { - size: 5 - } - }, - xaxis: { - labels: { - style: { - colors: '#b9b9c3', - fontSize: '1rem' - } - }, - axisTicks: { - show: false - }, - categories: ['01', '05', '09', '13', '17', '21', '26', '31'], - axisBorder: { - show: false - }, - tickPlacement: 'on' - }, - yaxis: { - tickAmount: 5, - labels: { - style: { - colors: '#b9b9c3', - fontSize: '1rem' - }, - formatter(val) { - return val > 999 ? `${(val / 1000).toFixed(0)}k` : val - } - } - }, - grid: { - borderColor: '#e7eef7', - padding: { - top: -20, - bottom: -10, - left: 20 - } - }, - tooltip: { - x: { show: false } - } - }, - series = [ - { - name: 'This Month', - data: [45000, 47000, 44800, 47500, 45500, 48000, 46500, 48600] - }, - { - name: 'Last Month', - data: [46000, 48000, 45500, 46600, 44500, 46500, 45000, 47000] - } - ] - return data !== null ? ( - - - Revenue - - - -
-
- This Month -

- $ - 86,589 -

-
-
- Last Month -

- $ - 73,683 -

-
-
- - - - ) : null -} -export default Revenue diff --git a/src/views/ui-elements/cards/analytics/RevenueReport.js b/src/views/ui-elements/cards/analytics/RevenueReport.js deleted file mode 100644 index 46d3145..0000000 --- a/src/views/ui-elements/cards/analytics/RevenueReport.js +++ /dev/null @@ -1,158 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { - Card, - CardTitle, - Row, - Col, - Button, - UncontrolledButtonDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle -} from 'reactstrap' -import Chart from 'react-apexcharts' - -const RevenueReport = props => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-analytics/revenue-report').then(res => setData(res.data)) - }, []) - - const revenueOptions = { - chart: { - stacked: true, - type: 'bar', - toolbar: { show: false } - }, - grid: { - padding: { - top: -20, - bottom: -10 - }, - yaxis: { - lines: { show: false } - } - }, - xaxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], - labels: { - style: { - colors: '#b9b9c3', - fontSize: '0.86rem' - } - }, - axisTicks: { - show: false - }, - axisBorder: { - show: false - } - }, - legend: { - show: false - }, - dataLabels: { - enabled: false - }, - colors: [props.primary, props.warning], - plotOptions: { - bar: { - columnWidth: '17%', - endingShape: 'rounded' - }, - distributed: true - }, - yaxis: { - labels: { - style: { - colors: '#b9b9c3', - fontSize: '0.86rem' - } - } - } - }, - revenueSeries = [ - { - name: 'Earning', - data: [95, 177, 284, 256, 105, 63, 168, 218, 72] - }, - { - name: 'Expense', - data: [-145, -80, -60, -180, -100, -60, -85, -75, -100] - } - ] - - const budgetSeries = [ - { - data: [61, 48, 69, 52, 60, 40, 79, 60, 59, 43, 62] - }, - { - data: [20, 10, 30, 15, 23, 0, 25, 15, 20, 5, 27] - } - ], - budgetOptions = { - chart: { - toolbar: { show: false }, - zoom: { enabled: false }, - type: 'line', - sparkline: { enabled: true } - }, - stroke: { - curve: 'smooth', - dashArray: [0, 5], - width: [2] - }, - colors: [props.primary, '#dcdae3'], - tooltip: { - enabled: false - } - } - - return data !== null ? ( - - - -
- Revenue Report -
-
- - Earning -
-
- - Expense -
-
-
- - - - - - 2020 - - - {data.years.map(item => ( - - {item} - - ))} - - -

${data.price}

-
- Budget: - {data.budget} -
- - - - - - ) : null -} - -export default RevenueReport diff --git a/src/views/ui-elements/cards/analytics/Sales.js b/src/views/ui-elements/cards/analytics/Sales.js deleted file mode 100644 index 75b2895..0000000 --- a/src/views/ui-elements/cards/analytics/Sales.js +++ /dev/null @@ -1,126 +0,0 @@ -import Chart from 'react-apexcharts' -import { MoreVertical, Circle } from 'react-feather' -import { - Card, - CardHeader, - CardTitle, - CardBody, - CardText, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle -} from 'reactstrap' - -const Sales = props => { - const options = { - chart: { - height: 300, - type: 'radar', - dropShadow: { - enabled: true, - blur: 8, - left: 1, - top: 1, - opacity: 0.2 - }, - toolbar: { - show: false - }, - offsetY: 5 - }, - stroke: { - width: 0 - }, - dataLabels: { - background: { - foreColor: ['#ebe9f1'] - } - }, - legend: { show: false }, - colors: [props.primary, props.info], - plotOptions: { - radar: { - polygons: { - strokeColors: ['#ebe9f1', 'transparent', 'transparent', 'transparent', 'transparent', 'transparent'], - connectorColors: 'transparent' - } - } - }, - fill: { - type: 'gradient', - gradient: { - shade: 'dark', - gradientToColors: [props.primary, props.info], - shadeIntensity: 1, - type: 'horizontal', - opacityFrom: 1, - opacityTo: 1, - stops: [0, 100, 100, 100] - } - }, - labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], - markers: { - size: 0 - }, - yaxis: { - show: false - }, - grid: { - show: false, - padding: { - bottom: -27 - } - } - }, - series = [ - { - name: 'Sales', - data: [90, 50, 86, 40, 100, 20] - }, - { - name: 'Visit', - data: [70, 75, 70, 76, 20, 85] - } - ] - return ( - - -
- - Sales - - Last 6 months -
- - - - - - - Last 28 Days - Last Month - Last Year - - - - - -
-
- -
Sales
-
-
-
-
- -
Visits
-
-
- - - - ) -} -export default Sales diff --git a/src/views/ui-elements/cards/analytics/Sales2.js b/src/views/ui-elements/cards/analytics/Sales2.js deleted file mode 100644 index a851d8f..0000000 --- a/src/views/ui-elements/cards/analytics/Sales2.js +++ /dev/null @@ -1,113 +0,0 @@ -import Chart from 'react-apexcharts' -import { Settings } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody, CardText } from 'reactstrap' - -const Sales2 = props => { - const options = { - chart: { - toolbar: { show: false }, - zoom: { enabled: false }, - type: 'line', - dropShadow: { - enabled: true, - top: 18, - left: 2, - blur: 5, - opacity: 0.2 - }, - offsetX: -10 - }, - stroke: { - curve: 'smooth', - width: 4 - }, - grid: { - borderColor: '#ebe9f1', - padding: { - top: -20, - bottom: 5, - left: 20 - } - }, - legend: { - show: false - }, - colors: ['#df87f2'], - fill: { - type: 'gradient', - gradient: { - shade: 'dark', - inverseColors: false, - gradientToColors: [props.primary], - shadeIntensity: 1, - type: 'horizontal', - opacityFrom: 1, - opacityTo: 1, - stops: [0, 100, 100, 100] - } - }, - markers: { - size: 0, - hover: { - size: 5 - } - }, - xaxis: { - labels: { - offsetY: 5, - style: { - colors: '#b9b9c3', - fontSize: '0.857rem', - fontFamily: 'Montserrat' - } - }, - axisTicks: { - show: false - }, - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], - axisBorder: { - show: false - }, - tickPlacement: 'on' - }, - yaxis: { - tickAmount: 5, - labels: { - style: { - colors: '#b9b9c3', - fontSize: '0.857rem', - fontFamily: 'Montserrat' - }, - formatter(val) { - return val > 999 ? `${(val / 1000).toFixed(1)}k` : val - } - } - }, - tooltip: { - x: { show: false } - } - }, - series = [ - { - name: 'Sales', - data: [140, 180, 150, 205, 160, 295, 125, 255, 205, 305, 240, 295] - } - ] - return ( - - -
- - Sales - - 2020 Total Sales: 12.84k -
- - - - - - - ) -} -export default Sales2 diff --git a/src/views/ui-elements/cards/analytics/SessionByDevice.js b/src/views/ui-elements/cards/analytics/SessionByDevice.js deleted file mode 100644 index 16cbc59..0000000 --- a/src/views/ui-elements/cards/analytics/SessionByDevice.js +++ /dev/null @@ -1,98 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import classnames from 'classnames' -import { - Card, - CardHeader, - CardTitle, - CardBody, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle -} from 'reactstrap' -import Chart from 'react-apexcharts' -import * as Icon from 'react-feather' - -const SessionByDevice = props => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-analytics/sessions-device').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - toolbar: { - show: false - } - }, - labels: ['Desktop', 'Mobile', 'Tablet'], - dataLabels: { - enabled: false - }, - legend: { show: false }, - comparedResult: [2, -3, 8], - stroke: { width: 0 }, - colors: [props.primary, props.warning, props.danger] - }, - series = [58.6, 34.9, 6.5] - - const renderChartInfo = () => { - return data.chart_info.map((item, index) => { - const IconTag = Icon[item.icon] - return ( -
-
- - {item.name} - - {item.usage}% -
-
- {item.upDown}% - {item.upDown > 0 ? ( - - ) : ( - - )} -
-
- ) - }) - } - - return data !== null ? ( - - - Session By Device - - - Last 7 days - - - {data.last_days.map(item => ( - - {item} - - ))} - - - - - - {renderChartInfo()} - - - ) : null -} -export default SessionByDevice diff --git a/src/views/ui-elements/cards/analytics/SupportTracker.js b/src/views/ui-elements/cards/analytics/SupportTracker.js deleted file mode 100644 index 604c1fb..0000000 --- a/src/views/ui-elements/cards/analytics/SupportTracker.js +++ /dev/null @@ -1,119 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { - Card, - CardHeader, - CardTitle, - CardBody, - CardText, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle, - Row, - Col -} from 'reactstrap' -import Chart from 'react-apexcharts' - -const SupportTracker = props => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-analytics/support-tracker').then(res => setData(res.data)) - }, []) - - const options = { - plotOptions: { - radialBar: { - size: 150, - offsetY: 20, - startAngle: -150, - endAngle: 150, - hollow: { - size: '65%' - }, - track: { - background: '#fff', - strokeWidth: '100%' - }, - dataLabels: { - name: { - offsetY: -5, - fontFamily: 'Montserrat', - fontSize: '1rem' - }, - value: { - offsetY: 15, - fontFamily: 'Montserrat', - fontSize: '1.714rem' - } - } - } - }, - colors: [props.danger], - fill: { - type: 'gradient', - gradient: { - shade: 'dark', - type: 'horizontal', - shadeIntensity: 0.5, - gradientToColors: [props.primary], - inverseColors: true, - opacityFrom: 1, - opacityTo: 1, - stops: [0, 100] - } - }, - stroke: { - dashArray: 8 - }, - labels: ['Completed Tickets'] - }, - series = [83] - - return data !== null ? ( - - - {data.title} - - - Last 7 days - - - {data.last_days.map(item => ( - - {item} - - ))} - - - - - - -

{data.totalTicket}

- Tickets - - - - - -
-
- New Tickets - {data.newTicket} -
-
- Open Tickets - {data.openTicket} -
-
- Response Time - {data.responseTime}d -
-
- - - ) : null -} -export default SupportTracker diff --git a/src/views/ui-elements/cards/analytics/index.js b/src/views/ui-elements/cards/analytics/index.js deleted file mode 100644 index 6e82e59..0000000 --- a/src/views/ui-elements/cards/analytics/index.js +++ /dev/null @@ -1,89 +0,0 @@ -import { Fragment, useContext } from 'react' -import { Row, Col } from 'reactstrap' -import Breadcrumbs from '@components/breadcrumbs' -import SessionByDevice from './SessionByDevice' -import ProductOrders from './ProductOrders' -import Customers from './Customers' -import Sales from './Sales' -import SupportTracker from './SupportTracker' -import RevenueReport from './RevenueReport' -import Revenue from './Revenue' -import GoalOverview from './GoalOverview' -import AvgSession from './AvgSessions' -import Sales2 from './Sales2' -import Earnings from './Earnings' -import { ThemeColors } from '@src/utility/context/ThemeColors' - -import '@styles/react/libs/charts/apex-charts.scss' - -const AnalyticsCards = () => { - const context = useContext(ThemeColors) - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default AnalyticsCards diff --git a/src/views/ui-elements/cards/basic/CardColumns.js b/src/views/ui-elements/cards/basic/CardColumns.js deleted file mode 100644 index 96f2f3e..0000000 --- a/src/views/ui-elements/cards/basic/CardColumns.js +++ /dev/null @@ -1,89 +0,0 @@ -import { CardColumns, Card, CardImg, CardBody, CardTitle, CardText } from 'reactstrap' -import img1 from '@src/assets/images/slider/06.jpg' -import img2 from '@src/assets/images/slider/01.jpg' -import img3 from '@src/assets/images/slider/02.jpg' -const CardColumnsComponent = () => { - return ( - - - - - Card title that wraps to a new line - - This is a longer card with supporting text below as a natural lead-in to additional content. This content is - a little bit longer. - - - - -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in - Source Title - -
-
- - - - - Card title - This card has supporting text below as a natural lead-in to additional content. - - Last updated 3 mins ago - - - - -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in - Source Title - -
-
- - - - Card title - This card has supporting text below as a natural lead-in to additional content. - - Last updated 3 mins ago - - - - - - - -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in - Source Title - -
-
- - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. This card has - even longer content than the first to show that equal height action. - - - Last updated 3 mins ago - - - - - ) -} - -export default CardColumnsComponent diff --git a/src/views/ui-elements/cards/basic/CardContentTypes.js b/src/views/ui-elements/cards/basic/CardContentTypes.js deleted file mode 100644 index 2f1a5c4..0000000 --- a/src/views/ui-elements/cards/basic/CardContentTypes.js +++ /dev/null @@ -1,100 +0,0 @@ -import { Fragment } from 'react' -import { - Card, - CardTitle, - CardBody, - CardText, - CardSubtitle, - CardLink, - CardImg, - ListGroup, - ListGroupItem, - Row, - Col -} from 'reactstrap' -import img1 from '@src/assets/images/slider/01.jpg' -import img2 from '@src/assets/images/slider/02.jpg' - -const CardContentTypes = () => { - return ( - -
Content types
- - -
Body
- - - - This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat - cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut. - - - -
Titles, text, and links
- - - Card Title - Support card subtitle - - Some quick example text to build on the card title and make up the bulk of the card's content. - - e.preventDefault()}> - Card Link - - e.preventDefault()}> - Another Link - - - -
List groups
- - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - - -
Images
- - Card cap - - - Some quick example text to build on the card title and make up the bulk of the card's content. - - - Cookie topping caramels jujubes gingerbread. Lollipop apple pie cupcake candy canes cookie ice cream. - Wafer chocolate bar carrot cake jelly-o. - - - - - -
Kitchen sink
- - - - Card Title - Some quick example text to build on the card title. - - - Cras justo odio - Vestibulum at eros - - - e.preventDefault()}> - Card Link - - e.preventDefault()}> - Another Link - - - - - - - ) -} - -export default CardContentTypes diff --git a/src/views/ui-elements/cards/basic/CardDeck.js b/src/views/ui-elements/cards/basic/CardDeck.js deleted file mode 100644 index a98e63b..0000000 --- a/src/views/ui-elements/cards/basic/CardDeck.js +++ /dev/null @@ -1,49 +0,0 @@ -import { CardDeck, Card, CardImg, CardBody, CardTitle, CardText, CardFooter } from 'reactstrap' -import img1 from '@src/assets/images/slider/03.jpg' -import img2 from '@src/assets/images/slider/02.jpg' -import img3 from '@src/assets/images/slider/01.jpg' - -const CardDeckComponent = () => { - return ( - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. This content is - a little bit longer. - - - - Last updated 3 mins ago - - - - - - Card title - This card has supporting text below as a natural lead-in to additional content. - - - Last updated 3 mins ago - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. This card has - even longer content than the first to show that equal height action. - - - - Last updated 3 mins ago - - - - ) -} - -export default CardDeckComponent diff --git a/src/views/ui-elements/cards/basic/CardGroup.js b/src/views/ui-elements/cards/basic/CardGroup.js deleted file mode 100644 index 7960c46..0000000 --- a/src/views/ui-elements/cards/basic/CardGroup.js +++ /dev/null @@ -1,49 +0,0 @@ -import { CardGroup, Card, CardImg, CardBody, CardTitle, CardText, CardFooter } from 'reactstrap' -import img1 from '@src/assets/images/slider/01.jpg' -import img2 from '@src/assets/images/slider/05.jpg' -import img3 from '@src/assets/images/slider/03.jpg' - -const CardGroupComponent = () => { - return ( - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. This content is - a little bit longer. - - - - Last updated 3 mins ago - - - - - - Card title - This card has supporting text below as a natural lead-in to additional content. - - - Last updated 3 mins ago - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. This card has - even longer content than the first to show that equal height action. - - - - Last updated 3 mins ago - - - - ) -} - -export default CardGroupComponent diff --git a/src/views/ui-elements/cards/basic/CardHeaderFooter.js b/src/views/ui-elements/cards/basic/CardHeaderFooter.js deleted file mode 100644 index 682c80d..0000000 --- a/src/views/ui-elements/cards/basic/CardHeaderFooter.js +++ /dev/null @@ -1,59 +0,0 @@ -import { Fragment } from 'react' -import { Card, CardHeader, CardTitle, CardBody, CardText, CardFooter, Row, Col, Button } from 'reactstrap' - -const CardHeaderFooter = () => { - return ( - -
Header and footer
- - - - Featured - - Special title treatment - - With supporting text below as a natural lead-in to additional content natural lead-in to additional - content. - - - Go somewhere - - - - - - - Quote - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Lorem ipsum dolor - sit amet, Integer posuere erat a ante Integer posuere erat a anteconsectetur. -

-
- Someone famous in - Source Title -
-
- - - - - - Featured - - Special title treatment - With supporting text below as a natural. - - Go somewhere - - - 2 days ago - - - - - ) -} - -export default CardHeaderFooter diff --git a/src/views/ui-elements/cards/basic/CardImages.js b/src/views/ui-elements/cards/basic/CardImages.js deleted file mode 100644 index 31df110..0000000 --- a/src/views/ui-elements/cards/basic/CardImages.js +++ /dev/null @@ -1,64 +0,0 @@ -import { Fragment } from 'react' -import { Card, CardImg, CardTitle, CardBody, CardImgOverlay, CardText, Row, Col } from 'reactstrap' -import img1 from '@src/assets/images/slider/06.jpg' -import img2 from '@src/assets/images/slider/09.jpg' -import img3 from '@src/assets/images/slider/10.jpg' - -const CardImages = () => { - return ( - -
Images
- - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. This content - is a little bit longer. - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to additional content. This content - is a little bit longer. - - - Last updated 3 mins ago - - - - - - - - - - - Card title - - - This is a wider card with supporting text below as a natural lead-in to additional content. This content - is a little bit longer. - - - Last updated 3 mins ago - - - - - - - ) -} - -export default CardImages diff --git a/src/views/ui-elements/cards/basic/CardLayout.js b/src/views/ui-elements/cards/basic/CardLayout.js deleted file mode 100644 index 90f72a2..0000000 --- a/src/views/ui-elements/cards/basic/CardLayout.js +++ /dev/null @@ -1,19 +0,0 @@ -import { Fragment } from 'react' -import CardGroup from './CardGroup' -import CardDeck from './CardDeck' -import CardColumns from './CardColumns' -const CardLayout = () => { - return ( - -
Card layout
-
Card Group
- -
Card Deck
- -
Card Columns
- - - ) -} - -export default CardLayout diff --git a/src/views/ui-elements/cards/basic/CardNavigation.js b/src/views/ui-elements/cards/basic/CardNavigation.js deleted file mode 100644 index 2ce94f8..0000000 --- a/src/views/ui-elements/cards/basic/CardNavigation.js +++ /dev/null @@ -1,140 +0,0 @@ -import { Fragment, useState } from 'react' -import { - Card, - CardHeader, - CardTitle, - CardBody, - CardText, - Row, - Col, - Button, - TabContent, - TabPane, - Nav, - NavItem, - NavLink -} from 'reactstrap' - -const CardNavigation = () => { - const [activePill, setPillActive] = useState('1') - const [activeTab, setTabActive] = useState('1') - - const togglePills = tab => { - if (activePill !== tab) { - setPillActive(tab) - } - } - - const toggleTabs = tab => { - if (activeTab !== tab) { - setTabActive(tab) - } - } - return ( - -
Navigation
- - - - - - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - Special title - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - - - - - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - Special title - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - - - ) -} - -export default CardNavigation diff --git a/src/views/ui-elements/cards/basic/CardStyleVariation.js b/src/views/ui-elements/cards/basic/CardStyleVariation.js deleted file mode 100644 index ba0e6f0..0000000 --- a/src/views/ui-elements/cards/basic/CardStyleVariation.js +++ /dev/null @@ -1,124 +0,0 @@ -import { Fragment } from 'react' -import { Card, CardBody, CardTitle, CardText, Row, Col } from 'reactstrap' - -const CardStyleVariation = () => { - return ( - -
Style variation
- - - - - - Primary Card Title - - Some quick example text to build on the card title and make up. - - - - - - - - Secondary Card Title - - Some quick example text to build on the card title and make up. - - - - - - - - Success Card Title - - Some quick example text to build on the card title and make up. - - - - - - - - Danger Card Title - - Some quick example text to build on the card title and make up. - - - - - - - - Warning Card Title - - Some quick example text to build on the card title and make up. - - - - - - - - Info Card Title - - Some quick example text to build on the card title and make up. - - - - - - - - - Primary Card Title - Some quick example text to build on the card title and make up. - - - - - - - Secondary Card Title - Some quick example text to build on the card title and make up. - - - - - - - Success Card Title - Some quick example text to build on the card title and make up. - - - - - - - Danger Card Title - Some quick example text to build on the card title and make up. - - - - - - - Warning Card Title - Some quick example text to build on the card title and make up. - - - - - - - Info Card Title - Some quick example text to build on the card title and make up. - - - - - - ) -} - -export default CardStyleVariation diff --git a/src/views/ui-elements/cards/basic/CardTextAlignment.js b/src/views/ui-elements/cards/basic/CardTextAlignment.js deleted file mode 100644 index dfe640d..0000000 --- a/src/views/ui-elements/cards/basic/CardTextAlignment.js +++ /dev/null @@ -1,47 +0,0 @@ -import { Fragment } from 'react' -import { Card, CardTitle, CardBody, CardText, Row, Col, Button } from 'reactstrap' - -const CardTextAlignment = () => { - return ( - -
Text alignment
- - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - - Go somewhere - - - - - - - ) -} - -export default CardTextAlignment diff --git a/src/views/ui-elements/cards/basic/CardTitles.js b/src/views/ui-elements/cards/basic/CardTitles.js deleted file mode 100644 index 9653349..0000000 --- a/src/views/ui-elements/cards/basic/CardTitles.js +++ /dev/null @@ -1,61 +0,0 @@ -import { Button, Card, CardTitle, CardBody, CardText, CardSubtitle, CardLink, CardImg, Row, Col } from 'reactstrap' -import img1 from '@src/assets/images/slider/04.jpg' -import img2 from '@src/assets/images/slider/03.jpg' -import img3 from '@src/assets/images/slider/06.jpg' - -const CardTitles = () => { - return ( - - - - - - Card Title - - Some quick example text to build on the card title and make up the bulk of the card's content. - - - Go Somewhere - - - - - - - - Card Title - Support card subtitle - - Card cap - - Bear claw sesame snaps gummies chocolate. - e.preventDefault()}> - Card Link - - e.preventDefault()}> - Another Link - - - - - - - - Card Title - Support card subtitle - Card cap - Bear claw sesame snaps gummies chocolate. - e.preventDefault()}> - Card Link - - e.preventDefault()}> - Another Link - - - - - - ) -} - -export default CardTitles diff --git a/src/views/ui-elements/cards/basic/index.js b/src/views/ui-elements/cards/basic/index.js deleted file mode 100644 index cef075f..0000000 --- a/src/views/ui-elements/cards/basic/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import { Fragment } from 'react' -import CardTitles from './CardTitles' -import CardImages from './CardImages' -import CardNavigation from './CardNavigation' -import CardHeaderFooter from './CardHeaderFooter' -import CardContentTypes from './CardContentTypes' -import CardTextAlignment from './CardTextAlignment' -import CardStyleVariation from './CardStyleVariation' -import CardLayout from './CardLayout' -import Breadcrumbs from '@components/breadcrumbs' -const BasicCards = () => { - return ( - - - - - - - - - - - - ) -} - -export default BasicCards diff --git a/src/views/ui-elements/cards/statistics/ActiveUsers.js b/src/views/ui-elements/cards/statistics/ActiveUsers.js deleted file mode 100644 index d55d177..0000000 --- a/src/views/ui-elements/cards/statistics/ActiveUsers.js +++ /dev/null @@ -1,83 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { UserCheck } from 'react-feather' -import StatsWithLineChart from '@components/widgets/stats/StatsWithLineChart' - -const ActiveUsers = ({ success }) => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-statistics/active-users').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - id: 'activeUsers', - toolbar: { - show: false - }, - sparkline: { - enabled: true - }, - dropShadow: { - enabled: true, - top: 5, - left: 0, - blur: 4, - opacity: 0.1 - } - }, - grid: { - show: false - }, - colors: [success], - dataLabels: { - enabled: false - }, - stroke: { - curve: 'smooth', - width: 5 - }, - fill: { - type: 'gradient', - gradient: { - shadeIntensity: 1, - gradientToColors: ['#55DD92'], - opacityFrom: 1, - opacityTo: 1, - stops: [0, 100, 100, 100] - } - }, - - xaxis: { - labels: { - show: false - }, - axisBorder: { - show: false - } - }, - yaxis: { - labels: { - show: false - } - }, - tooltip: { - x: { show: false } - } - } - - return data !== null ? ( - } - color='success' - stats='659.8k' - statTitle='Active Users' - series={data.series} - options={options} - type='line' - /> - ) : null -} - -export default ActiveUsers diff --git a/src/views/ui-elements/cards/statistics/Newsletter.js b/src/views/ui-elements/cards/statistics/Newsletter.js deleted file mode 100644 index da0efc0..0000000 --- a/src/views/ui-elements/cards/statistics/Newsletter.js +++ /dev/null @@ -1,83 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { Mail } from 'react-feather' -import StatsWithLineChart from '@components/widgets/stats/StatsWithLineChart' - -const Newsletter = ({ warning }) => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-statistics/newsletter').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - id: 'newsletter', - toolbar: { - show: false - }, - sparkline: { - enabled: true - }, - dropShadow: { - enabled: true, - top: 5, - left: 0, - blur: 4, - opacity: 0.1 - } - }, - grid: { - show: false - }, - colors: [warning], - dataLabels: { - enabled: false - }, - stroke: { - curve: 'smooth', - width: 5 - }, - fill: { - type: 'gradient', - gradient: { - shadeIntensity: 1, - gradientToColors: ['#ffc085'], - opacityFrom: 1, - opacityTo: 1, - stops: [0, 100, 100, 100] - } - }, - - xaxis: { - labels: { - show: false - }, - axisBorder: { - show: false - } - }, - yaxis: { - labels: { - show: false - } - }, - tooltip: { - x: { show: false } - } - } - - return data !== null ? ( - } - color='warning' - stats='28.7k' - statTitle='Newsletter' - series={data.series} - type='line' - options={options} - /> - ) : null -} - -export default Newsletter diff --git a/src/views/ui-elements/cards/statistics/OrdersBarChart.js b/src/views/ui-elements/cards/statistics/OrdersBarChart.js deleted file mode 100644 index 3ab6b3e..0000000 --- a/src/views/ui-elements/cards/statistics/OrdersBarChart.js +++ /dev/null @@ -1,79 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import TinyChartStats from '@components/widgets/stats/TinyChartStats' - -const OrdersBarChart = ({ warning }) => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-statistics/orders-bar-chart').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - stacked: true, - toolbar: { - show: false - } - }, - grid: { - show: false, - padding: { - left: 0, - right: 0, - top: -15, - bottom: -15 - } - }, - plotOptions: { - bar: { - horizontal: false, - columnWidth: '20%', - startingShape: 'rounded', - colors: { - backgroundBarColors: ['#f3f3f3', '#f3f3f3', '#f3f3f3', '#f3f3f3', '#f3f3f3'], - backgroundBarRadius: 5 - } - } - }, - legend: { - show: false - }, - dataLabels: { - enabled: false - }, - colors: [warning], - xaxis: { - labels: { - show: false - }, - axisBorder: { - show: false - }, - axisTicks: { - show: false - } - }, - yaxis: { - show: false - }, - tooltip: { - x: { - show: false - } - } - } - - return data !== null ? ( - - ) : null -} - -export default OrdersBarChart diff --git a/src/views/ui-elements/cards/statistics/OrdersReceived.js b/src/views/ui-elements/cards/statistics/OrdersReceived.js deleted file mode 100644 index 8a70077..0000000 --- a/src/views/ui-elements/cards/statistics/OrdersReceived.js +++ /dev/null @@ -1,74 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { Package } from 'react-feather' -import StatsWithAreaChart from '@components/widgets/stats/StatsWithAreaChart' - -const OrdersReceived = ({ kFormatter, warning }) => { - const [data, setData] = useState(null) - - const options = { - chart: { - id: 'revenue', - toolbar: { - show: false - }, - sparkline: { - enabled: true - } - }, - grid: { - show: false - }, - colors: [warning], - dataLabels: { - enabled: false - }, - stroke: { - curve: 'smooth', - width: 2.5 - }, - fill: { - type: 'gradient', - gradient: { - shadeIntensity: 0.9, - opacityFrom: 0.7, - opacityTo: 0.5, - stops: [0, 80, 100] - } - }, - - xaxis: { - labels: { - show: false - }, - axisBorder: { - show: false - } - }, - yaxis: { - labels: { - show: false - } - }, - tooltip: { - x: { show: false } - } - } - - useEffect(() => { - axios.get('/card/card-statistics/orders').then(res => setData(res.data)) - }, []) - - return data !== null ? ( - } - color='warning' - stats={kFormatter(data.analyticsData.orders)} - statTitle='Orders Received' - options={options} - series={data.series} - type='area' - /> - ) : null -} -export default OrdersReceived diff --git a/src/views/ui-elements/cards/statistics/ProfitLineChart.js b/src/views/ui-elements/cards/statistics/ProfitLineChart.js deleted file mode 100644 index 6349b32..0000000 --- a/src/views/ui-elements/cards/statistics/ProfitLineChart.js +++ /dev/null @@ -1,107 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import TinyChartStats from '@components/widgets/stats/TinyChartStats' - -const ProfitLineChart = ({ info }) => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-statistics/profit-line-chart').then(res => setData(res.data)) - }, []) - - const options = { - chart: { - toolbar: { - show: false - }, - zoom: { - enabled: false - } - }, - grid: { - borderColor: '#EBEBEB', - strokeDashArray: 5, - xaxis: { - lines: { - show: true - } - }, - yaxis: { - lines: { - show: false - } - }, - padding: { - top: -30, - bottom: -10 - } - }, - stroke: { - width: 3 - }, - colors: [info], - series: [ - { - data: [0, 20, 5, 30, 15, 45] - } - ], - markers: { - size: 2, - colors: info, - strokeColors: info, - strokeWidth: 2, - strokeOpacity: 1, - strokeDashArray: 0, - fillOpacity: 1, - discrete: [ - { - seriesIndex: 0, - dataPointIndex: 5, - fillColor: '#ffffff', - strokeColor: info, - size: 5 - } - ], - shape: 'circle', - radius: 2, - hover: { - size: 3 - } - }, - xaxis: { - labels: { - show: true, - style: { - fontSize: '0px' - } - }, - axisBorder: { - show: false - }, - axisTicks: { - show: false - } - }, - yaxis: { - show: false - }, - tooltip: { - x: { - show: false - } - } - } - - return data !== null ? ( - - ) : null -} - -export default ProfitLineChart diff --git a/src/views/ui-elements/cards/statistics/QuaterlySales.js b/src/views/ui-elements/cards/statistics/QuaterlySales.js deleted file mode 100644 index 5ef6a6b..0000000 --- a/src/views/ui-elements/cards/statistics/QuaterlySales.js +++ /dev/null @@ -1,74 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { ShoppingCart } from 'react-feather' -import StatsWithAreaChart from '@components/widgets/stats/StatsWithAreaChart' - -const QuarterlySales = ({ danger }) => { - const [data, setData] = useState(null) - - const options = { - chart: { - id: 'revenue', - toolbar: { - show: false - }, - sparkline: { - enabled: true - } - }, - grid: { - show: false - }, - colors: [danger], - dataLabels: { - enabled: false - }, - stroke: { - curve: 'smooth', - width: 2.5 - }, - fill: { - type: 'gradient', - gradient: { - shadeIntensity: 0.9, - opacityFrom: 0.7, - opacityTo: 0.5, - stops: [0, 80, 100] - } - }, - - xaxis: { - labels: { - show: false - }, - axisBorder: { - show: false - } - }, - yaxis: { - labels: { - show: false - } - }, - tooltip: { - x: { show: false } - } - } - - useEffect(() => { - axios.get('/card/card-statistics/sales').then(res => setData(res.data)) - }, []) - - return data !== null ? ( - } - color='danger' - stats={data.analyticsData.sales} - statTitle='Quarterly Sales' - options={options} - series={data.series} - type='area' - /> - ) : null -} -export default QuarterlySales diff --git a/src/views/ui-elements/cards/statistics/RevenueGenerated.js b/src/views/ui-elements/cards/statistics/RevenueGenerated.js deleted file mode 100644 index 80a9461..0000000 --- a/src/views/ui-elements/cards/statistics/RevenueGenerated.js +++ /dev/null @@ -1,74 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { CreditCard } from 'react-feather' -import StatsWithAreaChart from '@components/widgets/stats/StatsWithAreaChart' - -const RevenueGenerated = ({ kFormatter, success }) => { - const [data, setData] = useState(null) - - const options = { - chart: { - id: 'revenue', - toolbar: { - show: false - }, - sparkline: { - enabled: true - } - }, - grid: { - show: false - }, - colors: [success], - dataLabels: { - enabled: false - }, - stroke: { - curve: 'smooth', - width: 2.5 - }, - fill: { - type: 'gradient', - gradient: { - shadeIntensity: 0.9, - opacityFrom: 0.7, - opacityTo: 0.5, - stops: [0, 80, 100] - } - }, - - xaxis: { - labels: { - show: false - }, - axisBorder: { - show: false - } - }, - yaxis: { - labels: { - show: false - } - }, - tooltip: { - x: { show: false } - } - } - - useEffect(() => { - axios.get('/card/card-statistics/revenue').then(res => setData(res.data)) - }, []) - - return data !== null ? ( - } - color='success' - stats={kFormatter(data.analyticsData.revenue)} - statTitle='Revenue Generated' - options={options} - series={data.series} - type='area' - /> - ) : null -} -export default RevenueGenerated diff --git a/src/views/ui-elements/cards/statistics/SiteTraffic.js b/src/views/ui-elements/cards/statistics/SiteTraffic.js deleted file mode 100644 index c252c4c..0000000 --- a/src/views/ui-elements/cards/statistics/SiteTraffic.js +++ /dev/null @@ -1,25 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { Monitor } from 'react-feather' -import StatsWithLineChart from '@components/widgets/stats/StatsWithLineChart' - -const SiteTraffic = () => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-statistics/site-traffic').then(res => setData(res.data)) - }, []) - - return data !== null ? ( - } - color='primary' - stats='78.9k' - statTitle='Site Traffic' - series={data.series} - type='line' - /> - ) : null -} - -export default SiteTraffic diff --git a/src/views/ui-elements/cards/statistics/StatsCard.js b/src/views/ui-elements/cards/statistics/StatsCard.js deleted file mode 100644 index f83b8f8..0000000 --- a/src/views/ui-elements/cards/statistics/StatsCard.js +++ /dev/null @@ -1,70 +0,0 @@ -import classnames from 'classnames' -import Avatar from '@components/avatar' -import { TrendingUp, User, Box, DollarSign } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody, CardText, Row, Col, Media } from 'reactstrap' - -const StatsCard = ({ cols }) => { - const data = [ - { - title: '230k', - subtitle: 'Sales', - color: 'light-primary', - icon: - }, - { - title: '8.549k', - subtitle: 'Customers', - color: 'light-info', - icon: - }, - { - title: '1.423k', - subtitle: 'Products', - color: 'light-danger', - icon: - }, - { - title: '$9745', - subtitle: 'Revenue', - color: 'light-success', - icon: - } - ] - - const renderData = () => { - return data.map((item, index) => { - const margin = Object.keys(cols) - return ( - - - - -

{item.title}

- {item.subtitle} - - - - ) - }) - } - - return ( - - - Statistics - Updated 1 month ago - - - {renderData()} - - - ) -} - -export default StatsCard diff --git a/src/views/ui-elements/cards/statistics/SubscribersGained.js b/src/views/ui-elements/cards/statistics/SubscribersGained.js deleted file mode 100644 index e54903e..0000000 --- a/src/views/ui-elements/cards/statistics/SubscribersGained.js +++ /dev/null @@ -1,25 +0,0 @@ -import { useEffect, useState } from 'react' -import axios from 'axios' -import { Users } from 'react-feather' -import StatsWithAreaChart from '@components/widgets/stats/StatsWithAreaChart' - -const SubscribersGained = ({ kFormatter }) => { - const [data, setData] = useState(null) - - useEffect(() => { - axios.get('/card/card-statistics/subscribers').then(res => setData(res.data)) - }, []) - - return data !== null ? ( - } - color='primary' - stats={kFormatter(data.analyticsData.subscribers)} - statTitle='Subscribers Gained' - series={data.series} - type='area' - /> - ) : null -} - -export default SubscribersGained diff --git a/src/views/ui-elements/cards/statistics/index.js b/src/views/ui-elements/cards/statistics/index.js deleted file mode 100644 index 1462752..0000000 --- a/src/views/ui-elements/cards/statistics/index.js +++ /dev/null @@ -1,132 +0,0 @@ -import { Fragment, useContext } from 'react' -import { Row, Col } from 'reactstrap' -import { kFormatter } from '@utils' -import Breadcrumbs from '@components/breadcrumbs' -import StatsCard from './StatsCard' -import OrdersBarChart from './OrdersBarChart' -import ProfitLineChart from './ProfitLineChart' -import SubscribersGained from './SubscribersGained' -import RevenueGenerated from './RevenueGenerated' -import QuaterlySales from './QuaterlySales' -import OrdersReceived from './OrdersReceived' -import SiteTraffic from './SiteTraffic' -import ActiveUsers from './ActiveUsers' -import Newsletter from './Newsletter' -import StatsVertical from '@components/widgets/stats/StatsVertical' -import StatsHorizontal from '@components/widgets/stats/StatsHorizontal' -import { - Eye, - MessageSquare, - ShoppingBag, - Heart, - Award, - Truck, - Cpu, - Server, - Activity, - AlertOctagon -} from 'react-feather' -import { ThemeColors } from '@src/utility/context/ThemeColors' - -const StatisticsCards = () => { - const context = useContext(ThemeColors) - - return ( - - - - - {/* Orders Bar Chart */} - - - - {/* Orders Bar Chart */} - - {/* Profit Line Chart */} - - - - {/* Profit Line Chart */} - - {/* Stats Card */} - - - - {/* Stats Card */} - - - - {/* Stats With Icons */} - - } color='info' stats='36.9k' statTitle='Views' /> - - - } color='warning' stats='12k' statTitle='Comments' /> - - - } color='danger' stats='97.8k' statTitle='Orders' /> - - - } color='primary' stats='26.8' statTitle='Bookmarks' /> - - - } color='success' stats='689' statTitle='Reviews' /> - - - } color='danger' stats='2.1k' statTitle='Returns' /> - - {/* Stats With Icons */} - - - - {/* Stats With Icons Horizontal */} - - } color='primary' stats='86%' statTitle='CPU Usage' /> - - - } color='success' stats='1.2gb' statTitle='Memory Usage' /> - - - } color='danger' stats='0.1%' statTitle='Downtime Ratio' /> - - - } color='warning' stats='13' statTitle='Issues Found' /> - - {/* Stats With Icons Horizontal */} - - - - {/* Stats Area Charts */} - - - - - - - - - - - - - {/* Stats Area Charts */} - - - - {/* Stats Line Charts */} - - - - - - - - - - {/* Stats Line Charts */} - - - ) -} - -export default StatisticsCards diff --git a/src/views/ui-elements/colors/DefaultColors.js b/src/views/ui-elements/colors/DefaultColors.js deleted file mode 100644 index 00234a3..0000000 --- a/src/views/ui-elements/colors/DefaultColors.js +++ /dev/null @@ -1,127 +0,0 @@ -import { ChevronsRight } from 'react-feather' -import { Card, CardHeader, CardTitle, CardBody, CardText, Alert } from 'reactstrap' - -const DefaultColors = () => { - return ( - - - Default Colors - - - -
- For more color classes options please read the{' '} - - Documentation - -
- - We have a series of colors that are used by default. They include: -
    -
  • - - Primary -
    • -
  • - - Secondary -
    • -
  • - - Success -
    • -
  • - - Danger -
    • -
  • - - Warning -
    • -
  • - - Info -
    • -
- - For each color, we think has its functionality in the application as alerts of errors (danger), - warnings to the user (warning), communications of approval (success), or main color of the - application (primary). - -
-
- Primary -
-
- Secondary -
-
- Success -
-
- Danger -
-
- Warning -
-
- Info -
-
-
Lighten Variant
-

- Use - .bg-[color].bg-lighten-[1 | 2 | 3 | 4 | 5] - classes for lighten background color. -

-
-
- lighten-2 -
-
- lighten-2 -
-
- lighten-2 -
-
- lighten-2 -
-
- lighten-2 -
-
- lighten-2 -
-
-
Darken Variant
-

- Use - .bg-[color].bg-darken-[1 | 2 | 3 | 4 | 5] - classes for darken background color. -

-
-
- darken-2 -
-
- darken-2 -
-
- darken-2 -
-
- darken-2 -
-
- darken-2 -
-
- darken-2 -
-
- - - ) -} -export default DefaultColors diff --git a/src/views/ui-elements/colors/GradientColors.js b/src/views/ui-elements/colors/GradientColors.js deleted file mode 100644 index bcaa489..0000000 --- a/src/views/ui-elements/colors/GradientColors.js +++ /dev/null @@ -1,63 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' -import { ChevronsRight } from 'react-feather' - -const GradientColors = () => { - return ( - - - Gradient Colors - - -

- We have created gradient colors based on our default colors, use below mentioned classes for gradient colors. -

-
    -
  • - bg-gradient-primary -
    • -
  • - bg-gradient-secondary -
    • -
  • - bg-gradient-success -
    • -
  • - bg-gradient-danger -
    • -
  • - bg-gradient-warning -
    • -
  • - bg-gradient-info -
    • -
-

- For each color, we think has its functionality in the application as alerts of errors (danger), - warnings to the user (warning), communications of approval (success), or main color of the - application (primary). -

-
-
- Primary Gradient -
-
- Secondary Gradient -
-
- Success Gradient -
-
- Danger Gradient -
-
- Warning Gradient -
-
- Info Gradient -
-
- - - ) -} -export default GradientColors diff --git a/src/views/ui-elements/colors/index.js b/src/views/ui-elements/colors/index.js deleted file mode 100644 index 96f3334..0000000 --- a/src/views/ui-elements/colors/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import { Fragment } from 'react' -import { Row, Col } from 'reactstrap' -import Breadcrumbs from '@components/breadcrumbs' -import DefaultColors from './DefaultColors' -import GradientColors from './GradientColors' - -import '@styles/base/pages/ui-colors.scss' - -const Colors = () => { - return ( - - - - - - - - - - - - ) -} - -export default Colors diff --git a/src/views/ui-elements/icons/index.js b/src/views/ui-elements/icons/index.js deleted file mode 100644 index a3ca794..0000000 --- a/src/views/ui-elements/icons/index.js +++ /dev/null @@ -1,133 +0,0 @@ -import { Fragment, useState } from 'react' -import classnames from 'classnames' -import { toast } from 'react-toastify' -import * as Icons from 'react-feather' -import Avatar from '@components/avatar' -import { - Card, - CardBody, - Row, - Col, - Input, - FormGroup, - InputGroup, - InputGroupAddon, - InputGroupText, - UncontrolledTooltip -} from 'reactstrap' -import Breadcrumbs from '@components/breadcrumbs' -import { CopyToClipboard } from 'react-copy-to-clipboard' - -import '@styles/base/pages/ui-feather.scss' - -const ToastContent = ({ icon }) => ( - -
-
- } /> -
Icon Name Copied! 📋
-
-
-
- - {icon} - -
- -) - -const FeatherIcons = () => { - const IconsArr = [], - [query, setQuery] = useState([]), - [filteredArr, setFilteredArr] = useState([]), - [active, setActive] = useState(null) - - for (const key in Icons) { - IconsArr.push(key) - } - - const handleFilter = val => { - const arr = [] - if (val.length) { - IconsArr.filter(icon => { - if (icon.toLowerCase().includes(val.toLowerCase())) { - arr.push(icon) - } - }) - } - setFilteredArr([...arr]) - } - - const handleIconCardClick = icon => { - setActive(icon) - toast.success(, { hideProgressBar: true }) - } - - const renderIcons = () => { - const dataToRender = query.length ? filteredArr : IconsArr - if (dataToRender.length) { - return dataToRender.map(icon => { - const IconTag = Icons[icon] - return ( - - `}> - handleIconCardClick(icon)} - > - -
- -
-

{icon}

- - - - - {icon.replace(/([A-Z])/g, ' $1').trim()} - - - ) - }) - } else { - return ( -
-

No Icons Found!

-
- ) - } - } - - return ( - - - - -
- - - - - - - { - handleFilter(e.target.value) - setQuery(e.target.value) - }} - /> - -
- - -
- {renderIcons()} -
- - ) -} -export default FeatherIcons diff --git a/src/views/ui-elements/page-layouts/BoxedLayout.js b/src/views/ui-elements/page-layouts/BoxedLayout.js deleted file mode 100644 index 786ebe8..0000000 --- a/src/views/ui-elements/page-layouts/BoxedLayout.js +++ /dev/null @@ -1,30 +0,0 @@ -import { Fragment } from 'react' -import { Alert } from 'reactstrap' -import Breadcrumbs from '@components/breadcrumbs' -import Ecommerce from '../../dashboard/ecommerce' - -const BoxedLayout = () => { - return ( - - - -
- Info: - - Please check the{' '} - - Layout boxed documentation - {' '} - for more details. - -
- - - - ) -} - -export default BoxedLayout diff --git a/src/views/ui-elements/page-layouts/CollapsedMenu.js b/src/views/ui-elements/page-layouts/CollapsedMenu.js deleted file mode 100644 index b8d3dbf..0000000 --- a/src/views/ui-elements/page-layouts/CollapsedMenu.js +++ /dev/null @@ -1,34 +0,0 @@ -import { Fragment } from 'react' -import { Alert } from 'reactstrap' -import Breadcrumbs from '@components/breadcrumbs' -import Ecommerce from '../../dashboard/ecommerce' - -const CollapsedMenu = () => { - return ( - - - -
- Info: - - Use this layout to set menu (navigation) default collapsed. Please check{' '} - - the Layout collapsed menu documentation - {' '} - for more details. - -
- - - - ) -} - -export default CollapsedMenu diff --git a/src/views/ui-elements/page-layouts/LayoutBlank.js b/src/views/ui-elements/page-layouts/LayoutBlank.js deleted file mode 100644 index 65764cd..0000000 --- a/src/views/ui-elements/page-layouts/LayoutBlank.js +++ /dev/null @@ -1,31 +0,0 @@ -import { Fragment } from 'react' -import { Alert } from 'reactstrap' - -const LayoutBlank = () => { - return ( - -
-
-

Layout Blank

- -
- Info: - - This layout is used in Authentication & Miscellaneous page. Please check the{' '} - - Layout blank documentation - - for more details. - -
- -
-
- - ) -} - -export default LayoutBlank diff --git a/src/views/ui-elements/page-layouts/LayoutEmpty.js b/src/views/ui-elements/page-layouts/LayoutEmpty.js deleted file mode 100644 index 8eb9afc..0000000 --- a/src/views/ui-elements/page-layouts/LayoutEmpty.js +++ /dev/null @@ -1,29 +0,0 @@ -import { Fragment } from 'react' - -import Breadcrumbs from '@components/breadcrumbs' -import { Alert } from 'reactstrap' - -const LayoutEmpty = () => { - return ( - - - -
- Info: - - This layout can be useful for getting started with empty content section. Please check the{' '} - - Layout empty documentation - {' '} - for more details. - -
- - - ) -} - -export default LayoutEmpty diff --git a/src/views/ui-elements/page-layouts/WithoutMenu.js b/src/views/ui-elements/page-layouts/WithoutMenu.js deleted file mode 100644 index 7be330f..0000000 --- a/src/views/ui-elements/page-layouts/WithoutMenu.js +++ /dev/null @@ -1,34 +0,0 @@ -import { Fragment } from 'react' -import { Alert } from 'reactstrap' -import Breadcrumbs from '@components/breadcrumbs' -import Ecommerce from '../../dashboard/ecommerce' - -const WithoutMenu = () => { - return ( - - - -
- Info: - - Please check the{' '} - - Layout without menu documentation - {' '} - for more details. - -
- - - - ) -} - -export default WithoutMenu diff --git a/src/views/ui-elements/typography/BlockquoteDefault.js b/src/views/ui-elements/typography/BlockquoteDefault.js deleted file mode 100644 index 7d904c0..0000000 --- a/src/views/ui-elements/typography/BlockquoteDefault.js +++ /dev/null @@ -1,24 +0,0 @@ -import { Card, CardHeader, CardTitle, CardText, CardBody } from 'reactstrap' - -const BlockquoteDefault = () => { - return ( - - - - Blockquotes Default - - - - - - Left aligned basic blockquotes. Use text utilities classes like .text-center / .text-right as - needed to change the alignment of your blockquote. - -
-

Design is not just what it looks like and feels like. Design is how it works.

-
- - - ) -} -export default BlockquoteDefault diff --git a/src/views/ui-elements/typography/BlockquoteStyling.js b/src/views/ui-elements/typography/BlockquoteStyling.js deleted file mode 100644 index 407fa23..0000000 --- a/src/views/ui-elements/typography/BlockquoteStyling.js +++ /dev/null @@ -1,37 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText } from 'reactstrap' - -const BlockquoteStyling = () => { - return ( - - - Blockquotes styling - - - - - Add a .border-[left / right]-[color] .border-[left / right]-3{' '} - helper classes, where color can be any color from Admin color palette. - -
- - Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving - your other innovations. - -
- Steve Jobs Entrepreneur -
-
-
- - Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving - your other innovations. - -
- Steve Jobs Entrepreneur -
-
- - - ) -} -export default BlockquoteStyling diff --git a/src/views/ui-elements/typography/BlockquotesAvatar.js b/src/views/ui-elements/typography/BlockquotesAvatar.js deleted file mode 100644 index a152479..0000000 --- a/src/views/ui-elements/typography/BlockquotesAvatar.js +++ /dev/null @@ -1,52 +0,0 @@ -import img1 from '@src/assets/images/portrait/small/avatar-s-5.jpg' -import img2 from '@src/assets/images/portrait/small/avatar-s-3.jpg' -import { Card, CardHeader, CardTitle, CardText, CardBody, Media } from 'reactstrap' - -const BlockquotesAvatar = () => { - return ( - - - Blockquotes with avatar - - - - - You can create a blockquot with avatar using media component. - -
- - - - - Sometimes life is going to hit you in the head with a brick. Don't lose faith. - -
- Steve Jobs - Entrepreneur -
-
- Blockquotes with avatar rounded image example -
- - - - - Sometimes life is going to hit you in the head with a brick. Don't lose faith. - -
- Steve Jobs - Entrepreneur -
-
- - - ) -} -export default BlockquotesAvatar diff --git a/src/views/ui-elements/typography/CustomizingHeadings.js b/src/views/ui-elements/typography/CustomizingHeadings.js deleted file mode 100644 index d2d69c7..0000000 --- a/src/views/ui-elements/typography/CustomizingHeadings.js +++ /dev/null @@ -1,65 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText, Table } from 'reactstrap' - -const CustomizingHeadings = () => { - return ( - - - - Customizing headings Default - - - - - Use the included utility classes to recreate the small secondary heading text. - - - - - - - - - - - - - - - - - - - - - - - -
-

- Display heading Secondary text -

-
-

- Display heading Secondary text -

-
-

- Display heading Secondary text -

-
-

- Display heading Secondary text -

-
-
- Display heading Secondary text -
-
-
- Display heading Secondary text -
-
- - ) -} -export default CustomizingHeadings diff --git a/src/views/ui-elements/typography/DescriptionList.js b/src/views/ui-elements/typography/DescriptionList.js deleted file mode 100644 index 7ca338c..0000000 --- a/src/views/ui-elements/typography/DescriptionList.js +++ /dev/null @@ -1,57 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, Row, Col } from 'reactstrap' - -const DescriptionList = () => { - return ( - - - - Description lists Horizontal - - - - -
- - -
Description lists
- - -
A description list is perfect for defining terms.
- - -
-
- - -
Euismod
- - -
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- - -
-
- - -
Malesuada porta
- - -
Etiam porta sem malesuada magna mollis euismod.
- - -
-
- - -
Truncated term is truncated
- - -
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc
- - -
- - - ) -} -export default DescriptionList diff --git a/src/views/ui-elements/typography/DescriptionListText.js b/src/views/ui-elements/typography/DescriptionListText.js deleted file mode 100644 index 5b4a47c..0000000 --- a/src/views/ui-elements/typography/DescriptionListText.js +++ /dev/null @@ -1,77 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, Row, Col, CardText } from 'reactstrap' - -const DescriptionListtext = () => { - return ( - - - - Description lists Text Alignment - - - - - - Description lists with right aligned text in <dt> tag using .text-right class. - -
- - -
Description lists
- - -
A description list is perfect for defining terms.
- - -
-
- - -
Euismod
- - -
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- - -
-
- - -
Malesuada porta
- - -
Etiam porta sem malesuada magna mollis euismod.
- - -
-
- - -
Truncated term is truncated
- - -
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc
- - -
-
- - -
Nesting
- - - - -
Nested definition list
- - -
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
- - - - -
- - - ) -} -export default DescriptionListtext diff --git a/src/views/ui-elements/typography/DescriptionListVertical.js b/src/views/ui-elements/typography/DescriptionListVertical.js deleted file mode 100644 index c2ba776..0000000 --- a/src/views/ui-elements/typography/DescriptionListVertical.js +++ /dev/null @@ -1,25 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap' - -const DescriptionListVertical = () => { - return ( - - - - Description lists Vertical - - - - -
-
Description lists
-
A description list is perfect for defining terms.
-
Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio.
-
Malesuada porta
-
Etiam porta sem malesuada magna mollis euismod.
-
- - - ) -} -export default DescriptionListVertical diff --git a/src/views/ui-elements/typography/DisplayHeadings.js b/src/views/ui-elements/typography/DisplayHeadings.js deleted file mode 100644 index cc08324..0000000 --- a/src/views/ui-elements/typography/DisplayHeadings.js +++ /dev/null @@ -1,44 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText, Table } from 'reactstrap' - -const DisplayHeadings = () => { - return ( - - - Display Headings - - - - - Traditional heading elements are designed to work best in the meat of your page content. When you need a - heading to stand out, consider using a display-[1-4] for larger, slightly more opinionated - heading style. - - - - - - - - - - - - - - - - - -
-

Display 1

-
-

Display 2

-
-

Display 3

-
-

Display 4

-
- - ) -} -export default DisplayHeadings diff --git a/src/views/ui-elements/typography/HTMLHeadings.js b/src/views/ui-elements/typography/HTMLHeadings.js deleted file mode 100644 index e2c0e8f..0000000 --- a/src/views/ui-elements/typography/HTMLHeadings.js +++ /dev/null @@ -1,70 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText, Table } from 'reactstrap' - -const HTMLHeadings = () => { - return ( - - - - HTML headings Default - - - - - - All HTML headings, - <h1> - through - <h6>, are available. .h1 through .h6 classes are also available, - for when you want to match the font styling of a heading. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PreviewFont Size
-

H1 Heading

- 		2rem
-

H2 Heading

- 		1.74rem
-

H3 Heading

- 		1.51rem
-

H4 Heading

- 		1.32rem
-
H5 Heading
- 		1.14rem
-
H6 Heading
- 		1rem
- - ) -} -export default HTMLHeadings diff --git a/src/views/ui-elements/typography/HeadingColors.js b/src/views/ui-elements/typography/HeadingColors.js deleted file mode 100644 index 0596431..0000000 --- a/src/views/ui-elements/typography/HeadingColors.js +++ /dev/null @@ -1,53 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText, Table } from 'reactstrap' - -const HeadingColors = () => { - return ( - - - Heading colors - - - - - Heading elements are also changed with different color options. Use class - text-[primary/secondary/success/danger/info/warning] class with heading elements. - - - - - - - - - - - - - - - - - - - - - - - -
-

Display heading

-
-

Display heading

-
-

Display heading

-
-

Display heading

-
-
Display heading
-
-
Display heading
-
- - ) -} -export default HeadingColors diff --git a/src/views/ui-elements/typography/LightBoldHeadings.js b/src/views/ui-elements/typography/LightBoldHeadings.js deleted file mode 100644 index db83537..0000000 --- a/src/views/ui-elements/typography/LightBoldHeadings.js +++ /dev/null @@ -1,77 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText, Table } from 'reactstrap' - -const LightBoldHeadings = () => { - return ( - - - Light / Bold Headings - - - - - All HTML headings are available with light and bold font-weight. Use .font-weight-normal for - light heading and .font-weight-bolderer for bold headings along with heading tags or classes. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Light headingsBold headings
-

Heading 1

- 		-

Heading 1

-
-

Heading 2

- 		-

Heading 2

-
-

Heading 3

- 		-

Heading 3

-
-

Heading 4

- 		-

Heading 4

-
-
Heading 5
- 		-
Heading 5
-
-
Heading 6
- 		-
Heading 6
-
- - ) -} -export default LightBoldHeadings diff --git a/src/views/ui-elements/typography/ListIcons.js b/src/views/ui-elements/typography/ListIcons.js deleted file mode 100644 index f4ecfdc..0000000 --- a/src/views/ui-elements/typography/ListIcons.js +++ /dev/null @@ -1,47 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText } from 'reactstrap' -import { ArrowRight, ChevronRight } from 'react-feather' - -const ListIcons = () => { - return ( - - - Lists icons - - - - - Use .list-style-icons class with <ul> tag to create a list with icons. - -
    -
  • - - Facilisis in pretium nisl aliquet -
    • -
  • - - Nulla volutpat aliquam velit -
      -
    • - - Phasellus iaculis neque -
      • -
    • - - Ac tristique libero volutpat at -
      • -
    -
    • -
  • - - Faucibus porta lacus fringilla vel -
    • -
  • - - Aenean sit amet erat nunc -
    • -
- - - ) -} -export default ListIcons diff --git a/src/views/ui-elements/typography/ListInline.js b/src/views/ui-elements/typography/ListInline.js deleted file mode 100644 index 028fafa..0000000 --- a/src/views/ui-elements/typography/ListInline.js +++ /dev/null @@ -1,35 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText } from 'reactstrap' - -const ListInline = () => { - return ( - - - Inline Lists - - - - - To create a inline list use .list-inline class with <ul> tag and, class{' '} - .list-inline-item with <li> tag. - -

Use inline numbers, alphabet, icons etc... for ordered Inline List.

-
    -
  • Chocolate
    • -
  • Cake
    • -
  • Ice-Cream
    • -
-
    -
  • 1. Chocolate
    • -
  • 2. Cake
    • -
  • 3. Ice-Cream
    • -
-
    -
  • $ 250
    • -
  • $ 110
    • -
  • $ 890
    • -
- - - ) -} -export default ListInline diff --git a/src/views/ui-elements/typography/ListOrdered.js b/src/views/ui-elements/typography/ListOrdered.js deleted file mode 100644 index 7fda880..0000000 --- a/src/views/ui-elements/typography/ListOrdered.js +++ /dev/null @@ -1,39 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText } from 'reactstrap' - -const ListOrdered = () => { - return ( - - - Lists Ordered - - - - - List of items in which the order does explicitly matter. Use <ol type="1|a|A|i|I">, The type - attribute specifies the kind of marker to use in the list. - -
    -
  1. Lorem ipsum dolor sit amet
    2. -
  2. Consectetur adipiscing elit
    3. -
  3. Integer molestie lorem at massa
    4. -
  4. Facilisis in pretium nisl aliquet
    5. -
  5. - Nulla volutpat aliquam velit -
      -
    1. Phasellus iaculis neque
      2. -
    2. Purus sodales ultricies
      3. -
    3. Vestibulum laoreet porttitor sem
      4. -
    4. Ac tristique libero volutpat at
      5. -
    5. Lorem ipsum dolor sit amet.
      6. -
    6. consectetur adipisicing elit. At, quae?
      7. -
    -
    6. -
  6. Faucibus porta lacus fringilla vel
    7. -
  7. Aenean sit amet erat nunc
    8. -
  8. Eget porttitor lorem
    9. -
- - - ) -} -export default ListOrdered diff --git a/src/views/ui-elements/typography/ListUnordered.js b/src/views/ui-elements/typography/ListUnordered.js deleted file mode 100644 index 112d186..0000000 --- a/src/views/ui-elements/typography/ListUnordered.js +++ /dev/null @@ -1,39 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText } from 'reactstrap' - -const ListUnordered = () => { - return ( - - - Lists Unordered - - - - - List of items in which the order does not explicitly matter. Use .list-style-circle or{' '} - .list-style-square class in unordered list to add circle or square bullet points. - -
    -
  • Lorem ipsum dolor sit amet
    • -
  • Consectetur adipiscing elit
    • -
  • Integer molestie lorem at massa
    • -
  • Facilisis in pretium nisl aliquet
    • -
  • - Nulla volutpat aliquam velit -
      -
    • Phasellus iaculis neque
      • -
    • Purus sodales ultricies
      • -
    • Vestibulum laoreet porttitor sem
      • -
    • Ac tristique libero volutpat at
      • -
    • Lorem ipsum dolor sit amet.
      • -
    • consectetur adipisicing elit. At, quae?
      • -
    -
    • -
  • Faucibus porta lacus fringilla vel
    • -
  • Aenean sit amet erat nunc
    • -
  • Eget porttitor lorem
    • -
- - - ) -} -export default ListUnordered diff --git a/src/views/ui-elements/typography/ListUnstyled.js b/src/views/ui-elements/typography/ListUnstyled.js deleted file mode 100644 index 8ce9ff8..0000000 --- a/src/views/ui-elements/typography/ListUnstyled.js +++ /dev/null @@ -1,39 +0,0 @@ -import { Card, CardHeader, CardTitle, CardBody, CardText } from 'reactstrap' - -const ListUnstyled = () => { - return ( - - - Lists Unstyled - - - - - Use class .list-unstyled for Lists Unstyled. It remove the default list-style and - left margin on list items (immediate children only). - This only applies to immediate children list items, meaning you will need to add the class - for any nested lists as well. - -
    -
  • Lorem ipsum dolor sit amet
    • -
  • Consectetur adipiscing elit
    • -
  • Integer molestie lorem at massa
    • -
  • Facilisis in pretium nisl aliquet
    • -
  • - Nulla volutpat aliquam velit -
      -
    • Phasellus iaculis neque
      • -
    • Purus sodales ultricies
      • -
    • Vestibulum laoreet porttitor sem
      • -
    • Ac tristique libero volutpat at
      • -
    -
    • -
  • Faucibus porta lacus fringilla vel
    • -
  • Aenean sit amet erat nunc
    • -
  • Eget porttitor lorem
    • -
- - - ) -} -export default ListUnstyled diff --git a/src/views/ui-elements/typography/NamingSource.js b/src/views/ui-elements/typography/NamingSource.js deleted file mode 100644 index 7044b1f..0000000 --- a/src/views/ui-elements/typography/NamingSource.js +++ /dev/null @@ -1,29 +0,0 @@ -import { Card, CardHeader, CardTitle, CardText, CardBody } from 'reactstrap' - -const NamingSource = () => { - return ( - - - Naming a source - - - - - Add a <footer className="blockquote-footer"> for identifying - the source. Wrap the name of the source work in <cite>. - -
- - Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done - something wonderful, that's what matters to me. - -
- Steve Jobs - Entrepreneur -
-
- - - ) -} -export default NamingSource diff --git a/src/views/ui-elements/typography/index.js b/src/views/ui-elements/typography/index.js deleted file mode 100644 index af6ad88..0000000 --- a/src/views/ui-elements/typography/index.js +++ /dev/null @@ -1,114 +0,0 @@ -import { Fragment } from 'react' -import { Row, Col } from 'reactstrap' -import Breadcrumbs from '@components/breadcrumbs' -import HTMLHeadings from './HTMLHeadings' -import LightBoldHeadings from './LightBoldHeadings' -import CustomizingHeadings from './CustomizingHeadings' -import HeadingColors from './HeadingColors' -import DisplayHeadings from './DisplayHeadings' -import BlockquoteDefault from './BlockquoteDefault' -import NamingSource from './NamingSource' -import BlockquoteStyling from './BlockquoteStyling' -import BlockquoteAvatar from './BlockquotesAvatar' -import ListUnstyled from './ListUnstyled' -import ListUnordered from './ListUnordered' -import ListOrdered from './ListOrdered' -import ListIcons from './ListIcons' -import ListInline from './ListInline' -import DescriptionList from './DescriptionList' -import DescriptionListVertical from './DescriptionListVertical' -import DescriptionListText from './DescriptionListText' - -const Typography = () => { - return ( - - - - - - - - - - - - - - - - - - - -
-

BlockQuotes

-

- For quoting blocks of content from another source within your document. Wrap{' '} - <blockquote className="blockquote"> around any HTML as the quote. -

-
-
- - - - - - - - - - - - - - -
-

Lists

-

- All lists - <ul>, <ol>, and <dl> - have their - margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom - . -

-
-
- - - - - - - - - - - - - - - - - -
-

Description list alignment

-

- Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic - mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text - with an ellipsis. -

-
-
- - - - - - - - - - - - - ) -} -export default Typography