landing
This commit is contained in:
Flatlogic Bot
parent
b336ce0275
commit
3983cfdf23
2
frontend/next-env.d.ts
vendored
2
frontend/next-env.d.ts
vendored
@ -1,6 +1,6 @@
|
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/image-types/global" />
|
/// <reference types="next/image-types/global" />
|
||||||
/// <reference path="./build/types/routes.d.ts" />
|
/// <reference path="./.next/types/routes.d.ts" />
|
||||||
|
|
||||||
// NOTE: This file should not be edited
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
|
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
|
||||||
|
|||||||
31
frontend/src/components/CardBoxWidget.tsx
Normal file
31
frontend/src/components/CardBoxWidget.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js'
|
||||||
|
import React, { ReactNode } from 'react'
|
||||||
|
import BaseIcon from './BaseIcon'
|
||||||
|
import CardBox from './CardBox'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
icon: string
|
||||||
|
iconColor: string
|
||||||
|
number: number
|
||||||
|
label: string
|
||||||
|
children?: ReactNode
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CardBoxWidget(props: Props) {
|
||||||
|
return (
|
||||||
|
<CardBox className={props.className}>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-start justify-start">
|
||||||
|
{props.icon && (
|
||||||
|
<BaseIcon path={props.icon} w="w-12" h="h-12" className={props.iconColor} />
|
||||||
|
)}
|
||||||
|
<div className="ml-4">
|
||||||
|
<h3 className="text-lg leading-tight text-gray-500 dark:text-gray-400">{props.label}</h3>
|
||||||
|
<h1 className="text-3xl leading-tight font-semibold">{props.number}</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,410 +1,141 @@
|
|||||||
import * as icon from '@mdi/js';
|
import React, { useEffect } from 'react';
|
||||||
import Head from 'next/head'
|
import type { ReactElement } from 'react';
|
||||||
import React from 'react'
|
import Head from 'next/head';
|
||||||
import axios from 'axios';
|
import Link from 'next/link';
|
||||||
import type { ReactElement } from 'react'
|
import { mdiChartTimelineVariant, mdiCalendar, mdiAccountMultiple, mdiCalendarClock } from '@mdi/js';
|
||||||
import LayoutAuthenticated from '../layouts/Authenticated'
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
||||||
import SectionMain from '../components/SectionMain'
|
import SectionMain from '../components/SectionMain';
|
||||||
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
|
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
|
||||||
import BaseIcon from "../components/BaseIcon";
|
import CardBoxWidget from '../components/CardBoxWidget';
|
||||||
import { getPageTitle } from '../config'
|
import CardBox from '../components/CardBox';
|
||||||
import Link from "next/link";
|
import { getPageTitle } from '../config';
|
||||||
|
|
||||||
import { hasPermission } from "../helpers/userPermissions";
|
|
||||||
import { fetchWidgets } from '../stores/roles/rolesSlice';
|
|
||||||
import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
|
|
||||||
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
|
|
||||||
|
|
||||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||||
|
import { fetch as fetchEvents } from '../stores/events/eventsSlice';
|
||||||
|
import { fetch as fetchGuests } from '../stores/guests/guestsSlice';
|
||||||
|
import {hasPermission} from "../helpers/userPermissions";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
const { currentUser } = useAppSelector((state) => state.auth);
|
||||||
const corners = useAppSelector((state) => state.style.corners);
|
const events = useAppSelector((state) => state.events.events);
|
||||||
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
const eventsCount = useAppSelector((state) => state.events.count);
|
||||||
|
const guestsCount = useAppSelector((state) => state.guests.count);
|
||||||
|
|
||||||
const loadingMessage = 'Loading...';
|
useEffect(() => {
|
||||||
|
if(hasPermission(currentUser, 'READ_EVENTS')) {
|
||||||
|
dispatch(fetchEvents({ query: '?sort=createdAt,DESC&limit=5' }));
|
||||||
const [users, setUsers] = React.useState(loadingMessage);
|
|
||||||
const [roles, setRoles] = React.useState(loadingMessage);
|
|
||||||
const [permissions, setPermissions] = React.useState(loadingMessage);
|
|
||||||
const [events, setEvents] = React.useState(loadingMessage);
|
|
||||||
const [venues, setVenues] = React.useState(loadingMessage);
|
|
||||||
const [vendors, setVendors] = React.useState(loadingMessage);
|
|
||||||
const [schedules, setSchedules] = React.useState(loadingMessage);
|
|
||||||
const [guests, setGuests] = React.useState(loadingMessage);
|
|
||||||
const [budgets, setBudgets] = React.useState(loadingMessage);
|
|
||||||
|
|
||||||
|
|
||||||
const [widgetsRole, setWidgetsRole] = React.useState({
|
|
||||||
role: { value: '', label: '' },
|
|
||||||
});
|
|
||||||
const { currentUser } = useAppSelector((state) => state.auth);
|
|
||||||
const { isFetchingQuery } = useAppSelector((state) => state.openAi);
|
|
||||||
|
|
||||||
const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
|
|
||||||
|
|
||||||
|
|
||||||
async function loadData() {
|
|
||||||
const entities = ['users','roles','permissions','events','venues','vendors','schedules','guests','budgets',];
|
|
||||||
const fns = [setUsers,setRoles,setPermissions,setEvents,setVenues,setVendors,setSchedules,setGuests,setBudgets,];
|
|
||||||
|
|
||||||
const requests = entities.map((entity, index) => {
|
|
||||||
|
|
||||||
if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
|
|
||||||
return axios.get(`/${entity.toLowerCase()}/count`);
|
|
||||||
} else {
|
|
||||||
fns[index](null);
|
|
||||||
return Promise.resolve({data: {count: null}});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
Promise.allSettled(requests).then((results) => {
|
|
||||||
results.forEach((result, i) => {
|
|
||||||
if (result.status === 'fulfilled') {
|
|
||||||
fns[i](result.value.data.count);
|
|
||||||
} else {
|
|
||||||
fns[i](result.reason.message);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
if(hasPermission(currentUser, 'READ_GUESTS')) {
|
||||||
async function getWidgets(roleId) {
|
dispatch(fetchGuests({ query: '' }));
|
||||||
await dispatch(fetchWidgets(roleId));
|
|
||||||
}
|
}
|
||||||
React.useEffect(() => {
|
}, [dispatch, currentUser]);
|
||||||
if (!currentUser) return;
|
|
||||||
loadData().then();
|
|
||||||
setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
|
|
||||||
}, [currentUser]);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
const upcomingEvents = events.filter(
|
||||||
if (!currentUser || !widgetsRole?.role?.value) return;
|
(event) => new Date(event.date) > new Date()
|
||||||
getWidgets(widgetsRole?.role?.value || '').then();
|
);
|
||||||
}, [widgetsRole?.role?.value]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>
|
<title>{getPageTitle('Event Dashboard')}</title>
|
||||||
{getPageTitle('Overview')}
|
|
||||||
</title>
|
|
||||||
</Head>
|
</Head>
|
||||||
<SectionMain>
|
<SectionMain>
|
||||||
<SectionTitleLineWithButton
|
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Event Dashboard" main>
|
||||||
icon={icon.mdiChartTimelineVariant}
|
|
||||||
title='Overview'
|
|
||||||
main>
|
|
||||||
{''}
|
{''}
|
||||||
</SectionTitleLineWithButton>
|
</SectionTitleLineWithButton>
|
||||||
|
|
||||||
{hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
|
||||||
currentUser={currentUser}
|
<CardBoxWidget
|
||||||
isFetchingQuery={isFetchingQuery}
|
label="Total Events"
|
||||||
setWidgetsRole={setWidgetsRole}
|
iconColor="text-blue-500"
|
||||||
widgetsRole={widgetsRole}
|
icon={mdiCalendar}
|
||||||
/>}
|
number={eventsCount}
|
||||||
{!!rolesWidgets.length &&
|
/>
|
||||||
hasPermission(currentUser, 'CREATE_ROLES') && (
|
<CardBoxWidget
|
||||||
<p className=' text-gray-500 dark:text-gray-400 mb-4'>
|
label="Upcoming Events"
|
||||||
{`${widgetsRole?.role?.label || 'Users'}'s widgets`}
|
iconColor="text-green-500"
|
||||||
</p>
|
icon={mdiCalendarClock}
|
||||||
)}
|
number={upcomingEvents.length}
|
||||||
|
/>
|
||||||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
|
<CardBoxWidget
|
||||||
{(isFetchingQuery || loading) && (
|
label="Total Guests"
|
||||||
<div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
|
iconColor="text-orange-500"
|
||||||
<BaseIcon
|
icon={mdiAccountMultiple}
|
||||||
className={`${iconsColor} animate-spin mr-5`}
|
number={guestsCount}
|
||||||
w='w-16'
|
/>
|
||||||
h='h-16'
|
|
||||||
size={48}
|
|
||||||
path={icon.mdiLoading}
|
|
||||||
/>{' '}
|
|
||||||
Loading widgets...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{ rolesWidgets &&
|
|
||||||
rolesWidgets.map((widget) => (
|
|
||||||
<SmartWidget
|
|
||||||
key={widget.id}
|
|
||||||
userId={currentUser?.id}
|
|
||||||
widget={widget}
|
|
||||||
roleId={widgetsRole?.role?.value || ''}
|
|
||||||
admin={hasPermission(currentUser, 'CREATE_ROLES')}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!!rolesWidgets.length && <hr className='my-6 ' />}
|
<SectionTitleLineWithButton icon={mdiCalendar} title="Recent Events">
|
||||||
|
{''}
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
|
||||||
<div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
<CardBox hasTable>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full bg-white dark:bg-slate-800">
|
||||||
{hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
|
<thead className="bg-gray-50 dark:bg-slate-700">
|
||||||
<div
|
<tr>
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
Event Name
|
||||||
<div className="flex justify-between align-center">
|
</th>
|
||||||
<div>
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
Date
|
||||||
Users
|
</th>
|
||||||
</div>
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
Location
|
||||||
{users}
|
</th>
|
||||||
</div>
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
</div>
|
Status
|
||||||
<div>
|
</th>
|
||||||
<BaseIcon
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
className={`${iconsColor}`}
|
Actions
|
||||||
w="w-16"
|
</th>
|
||||||
h="h-16"
|
</tr>
|
||||||
size={48}
|
</thead>
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
<tbody className="divide-y divide-gray-200 dark:divide-slate-700">
|
||||||
// @ts-ignore
|
{events.length > 0 ? (
|
||||||
path={icon.mdiAccountGroup || icon.mdiTable}
|
events.map((event) => (
|
||||||
/>
|
<tr key={event.id}>
|
||||||
</div>
|
<td className="px-6 py-4 whitespace-nowrap">{event.name}</td>
|
||||||
</div>
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
</div>
|
{new Date(event.date).toLocaleDateString()}
|
||||||
</Link>}
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">{event.location}</td>
|
||||||
{hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
<div
|
<span
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
||||||
>
|
new Date(event.date) < new Date()
|
||||||
<div className="flex justify-between align-center">
|
? 'bg-red-100 text-red-800'
|
||||||
<div>
|
: 'bg-green-100 text-green-800'
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
}`}
|
||||||
Roles
|
>
|
||||||
</div>
|
{new Date(event.date) < new Date() ? 'Past' : 'Upcoming'}
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
</span>
|
||||||
{roles}
|
</td>
|
||||||
</div>
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
</div>
|
<Link href={`/events/${event.id}`} className="text-indigo-600 hover:text-indigo-900">
|
||||||
<div>
|
View
|
||||||
<BaseIcon
|
</Link>
|
||||||
className={`${iconsColor}`}
|
</td>
|
||||||
w="w-16"
|
</tr>
|
||||||
h="h-16"
|
))
|
||||||
size={48}
|
) : (
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
<tr>
|
||||||
// @ts-ignore
|
<td colSpan={5} className="text-center py-10 text-gray-500">
|
||||||
path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
|
No events found.
|
||||||
/>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</tbody>
|
||||||
</Link>}
|
</table>
|
||||||
|
</div>
|
||||||
{hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
|
</CardBox>
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Permissions
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{permissions}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={icon.mdiShieldAccountOutline || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_EVENTS') && <Link href={'/events/events-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Events
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{events}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiCalendar' in icon ? icon['mdiCalendar' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_VENUES') && <Link href={'/venues/venues-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Venues
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{venues}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiMapMarker' in icon ? icon['mdiMapMarker' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_VENDORS') && <Link href={'/vendors/vendors-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Vendors
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{vendors}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiStore' in icon ? icon['mdiStore' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_SCHEDULES') && <Link href={'/schedules/schedules-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Schedules
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{schedules}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiCalendarClock' in icon ? icon['mdiCalendarClock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_GUESTS') && <Link href={'/guests/guests-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Guests
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{guests}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiAccountMultiple' in icon ? icon['mdiAccountMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_BUDGETS') && <Link href={'/budgets/budgets-list'}>
|
|
||||||
<div
|
|
||||||
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between align-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
|
||||||
Budgets
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{budgets}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<BaseIcon
|
|
||||||
className={`${iconsColor}`}
|
|
||||||
w="w-16"
|
|
||||||
h="h-16"
|
|
||||||
size={48}
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
path={'mdiCash' in icon ? icon['mdiCash' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</SectionMain>
|
</SectionMain>
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Dashboard.getLayout = function getLayout(page: ReactElement) {
|
Dashboard.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutAuthenticated>{page}</LayoutAuthenticated>
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Dashboard
|
export default Dashboard;
|
||||||
|
|||||||
@ -1,173 +1,98 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React from 'react';
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import BaseButton from '../components/BaseButton';
|
import BaseButton from '../components/BaseButton';
|
||||||
import CardBox from '../components/CardBox';
|
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
import SectionTitle from '../components/SectionTitle';
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
|
const Feature = ({ icon, title, text }) => (
|
||||||
|
<div className="p-6 text-center bg-white rounded-lg shadow-lg">
|
||||||
|
<div className="text-5xl text-blue-500 mb-4">{icon}</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-600">{text}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
export default function Starter() {
|
export default function LandingPage() {
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
const title = 'EventCoord Hub'
|
||||||
src: undefined,
|
|
||||||
photographer: undefined,
|
|
||||||
photographer_url: undefined,
|
|
||||||
})
|
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
|
||||||
const [contentType, setContentType] = useState('image');
|
|
||||||
const [contentPosition, setContentPosition] = useState('left');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
||||||
|
|
||||||
const title = 'EventCoord Hub'
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchData() {
|
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="bg-gray-50 text-gray-800">
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('Welcome')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
{/* Hero Section */}
|
||||||
<div
|
<header className="bg-blue-600 text-white text-center py-20">
|
||||||
className={`flex ${
|
<div className="container mx-auto px-6">
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
<h1 className="text-5xl font-bold mb-4">EventCoord Hub</h1>
|
||||||
} min-h-screen w-full`}
|
<p className="text-xl mb-8">Event planning with venues, vendors, schedules, guests, and budgets. Built for fast coordination and status tracking.</p>
|
||||||
>
|
<BaseButton
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
href='/login'
|
||||||
? imageBlock(illustrationImage)
|
label='Get Started'
|
||||||
: null}
|
color='light'
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
roundedFull
|
||||||
? videoBlock(illustrationVideo)
|
className='px-8 py-3 text-lg'
|
||||||
: null}
|
/>
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your EventCoord Hub app!"/>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
|
||||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BaseButtons>
|
|
||||||
<BaseButton
|
|
||||||
href='/login'
|
|
||||||
label='Login'
|
|
||||||
color='info'
|
|
||||||
className='w-full'
|
|
||||||
/>
|
|
||||||
|
|
||||||
</BaseButtons>
|
|
||||||
<div className='grid grid-cols-1 gap-2 lg:grid-cols-4 mt-2'>
|
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://react.dev/'>React.js</a></div>
|
|
||||||
|
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://tailwindcss.com/'>Tailwind CSS</a></div>
|
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://nodejs.org/en'>Node.js</a></div>
|
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://flatlogic.com/forum'>Flatlogic Forum</a></div>
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
</SectionFullScreen>
|
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
|
||||||
<p className='py-6 text-sm'>© 2024 <span>{title}</span>. All rights reserved</p>
|
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
|
||||||
Privacy Policy
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<section className="py-20">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<SectionTitle>Features</SectionTitle>
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
|
||||||
|
<Feature
|
||||||
|
icon="📍"
|
||||||
|
title="Venue Management"
|
||||||
|
text="Keep track of all your venues, their capacity, and availability."
|
||||||
|
/>
|
||||||
|
<Feature
|
||||||
|
icon="🚚"
|
||||||
|
title="Vendor Coordination"
|
||||||
|
text="Manage all your vendors, from caterers to photographers, in one place."
|
||||||
|
/>
|
||||||
|
<Feature
|
||||||
|
icon="🗓️"
|
||||||
|
title="Schedules & Events"
|
||||||
|
text="Create detailed schedules for your events and share them with your team."
|
||||||
|
/>
|
||||||
|
<Feature
|
||||||
|
icon="👥"
|
||||||
|
title="Guest Lists"
|
||||||
|
text="Easily manage your guest list, invitations, and RSVPs."
|
||||||
|
/>
|
||||||
|
<Feature
|
||||||
|
icon="💰"
|
||||||
|
title="Budget Tracking"
|
||||||
|
text="Stay on top of your event budget with our powerful tracking tools."
|
||||||
|
/>
|
||||||
|
<Feature
|
||||||
|
icon="📊"
|
||||||
|
title="Status Dashboards"
|
||||||
|
text="Get a quick overview of your event's progress with our visual dashboards."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className='bg-gray-800 text-white'>
|
||||||
|
<div className='container mx-auto px-6 py-8 flex flex-col md:flex-row justify-between items-center'>
|
||||||
|
<p className='text-sm mb-4 md:mb-0'>© {new Date().getFullYear()} <span>{title}</span>. All rights reserved</p>
|
||||||
|
<Link className='text-sm hover:text-blue-400' href='/privacy-policy/'>
|
||||||
|
Privacy Policy
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user