Application
E-commerce
We have made many different applications to help you with your admin side work. Amongst those is an E-Commerce application.
You can directly use complete E-commerce app to manage your E-commerce with ready-made functionality of Add to cart,Quick-view, and Checkout with Stripe as well as Paypal. Apart from that if you want to use it in your frontend application then you just need to change your json with your API data and you get complete workable E-commerce for your frontend.
Chat
Another application provided with in this theme is chat application. Here we have provided design to create your own chat application. We have kept in mind all basic necessities of the chat application and have created design according to it. You can integrate this design with your backend and make this application fully functional.
Gallery
There will be many situations where you want to use the images, and to present the images in more elegant manner, we have created a gallery application. You can use it to display images or use the effects used in the gallery application and implement in those places where you are using the images.
There are many different options provided in the gallery application, you can check them out by following the link give beside title.
To-Do
As an admin there are many tasks one have to keep in mind. To keep track of all those tasks, a to-do application has been provided. All the functionalities that a to-do application requires has been already given so the user doesn't have to download and install any other application.
Below link takes you to the design of the application, but it is just the design, data won't be stored anywhere, if you reload the page you will notice that changes will be gone. You can store and modify the todo list by storing it in the database of your liking. To make it easier of the developers we have already give the to-do application integrated with firebase-firestore.
To keep things professional you can add integrate the email application with this theme, to share the important information with your colleagues. We have provided a design for the email application, you can use it and build a fully functional e-mail application.
See the design of the email application at the below given link.
Bookmark
You Can ADD New Bookmark and then add to your Favioute bookmark or remove from Favioute bookmark
Project
You Can Create New Project and then list of project to manage doing and done project
File Manager
You Can Add Selected Files and Upload to upload selected file
Calender
Installing and usage
npm i @fullcalendar/vue3Inside Your template tags add
<FullCalendar :options="calendarOptions" />
Inside Your script tags add
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import { INITIAL_EVENTS, createEventId } from "@/store/modules/calendar";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
export default {
components: { FullCalendar, },
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: "dayGridMonth",
dropAccept: '.draggableButton',
dateClick: this.handleDateClick,
initialEvents: INITIAL_EVENTS, editable: true,
selectable: true, selectMirror: true, dayMaxEvents: true,
weekends: true, select: this.handleDateSelect, eventClick: this.handleEventClick,
eventsSet: this.handleEvents, droppable: true,
drop: this.HandleDrop,
headerToolbar: {
left: "prev,next today", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay",
},
},
};
},
methods: {
HandleDrop(selectInfo) {
let title = selectInfo.draggedEl.outerText
let calendarApi = selectInfo.view.calendar
calendarApi.unselect()
if (title) {
calendarApi.addEvent({
id: createEventId(),
title, start: selectInfo.date, allDay: true
})
}
},
handleWeekendsToggle() {
this.calendarOptions.weekends = !this.calendarOptions.weekends
},
handleDateSelect(selectInfo) {
let title = prompt('Please enter a new title for your event')
let calendarApi = selectInfo.view.calendar
calendarApi.unselect()
if (title) {
calendarApi.addEvent({
id: createEventId(),
title, start: selectInfo.startStr, end: selectInfo.endStr, allDay: selectInfo.allDay,
})
}
},
handleEventClick(clickInfo) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
},
handleEvents(events) {
this.currentEvents = events
},
},
mounted() {
let buttons = document.getElementsByClassName('draggableButton')
for (var i = 0; i < buttons.length; i++) {
new Draggable(buttons[i]);
}
}
};Inside Your store js tags add
let eventGuid = 0
let todayStr = new Date().toISOString().replace(/T.*$/, '')
export const INITIAL_EVENTS= [
{
id: createEventId(),
title: 'All-day event',
start: todayStr
},
{
id: createEventId(),
title: 'Timed event',
start: todayStr + 'T12:00:00'
},
{
id: createEventId(),
title: "event 1",
date: "2022-09-01"
},
{
id: createEventId(),
title: "BirthDay",
date: "2022-09-16"
},
{
id: createEventId(),
title: "All-day event",
date: "2022-09-04"
},
{
id: createEventId(),
title: "event",
date: "2022-09-20"
},
{
id: createEventId(),
title:"event 2",
date:"2022-10-07"
},
{
id: createEventId(),
title:"all-day event",
date:"2022-10-27"
},
{
id: createEventId(),
title:"event",
date:"2022-12-10"
},
{
id: createEventId(),
title:"event2",
date:"2022-12-12"
},
{
id: createEventId(),
title:"event",
date:"2022-11-1",
start:"T12:00:00"},
{
id: createEventId(),
title:"event",
date:"2022-11-18",},
{
id: createEventId(),
title:"event",
date:"2022-11-06",
},
{
id: createEventId(),
title:"All Day event",
date:"2022-12-06",
},
{
id: createEventId(),
title:"BirthDay Party",
date:"2022-12-22",
},
{
id: createEventId(),
title:"4p meeting",
date:"2022-12-11",
},
{
id: createEventId(),
title:"3:30p meeting",
date:"2022-12-12",
},
{
id: createEventId(),
title:"Tour with our team ",
date:"2023-01-16",
},
{
id: createEventId(),
title:"4p meeting ",
date:"2023-01-03",
},
{
id: createEventId(),
title:"event3",
date:"2023-01-06",
},
{
id: createEventId(),
title:"4p meeting",
date:"2023-01-22",
},
{
id: createEventId(),
title:"event1",
date:"2023-01-22",
},
{
id: createEventId(),
title:"3:30p meeting",
date:"2023-01-23",
},
{
id: createEventId(),
title:"3:30p meeting",
date:"2023-01-27",
},
]
export function createEventId() {
return String(eventGuid++)
}Others
There are many others application in Tivo which is help you in improve your knowledge and solve your issues.
- Knowledge Base
- Job Search
- Learning
- Social App
- Kanban Board