Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
fc419cf4bf |
@ -17,6 +17,7 @@ const searchRoutes = require('./routes/search');
|
|||||||
const pexelsRoutes = require('./routes/pexels');
|
const pexelsRoutes = require('./routes/pexels');
|
||||||
|
|
||||||
const openaiRoutes = require('./routes/openai');
|
const openaiRoutes = require('./routes/openai');
|
||||||
|
const publicEventsRoutes = require('./routes/publicEvents');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -95,6 +96,7 @@ app.use(bodyParser.json());
|
|||||||
app.use('/api/auth', authRoutes);
|
app.use('/api/auth', authRoutes);
|
||||||
app.use('/api/file', fileRoutes);
|
app.use('/api/file', fileRoutes);
|
||||||
app.use('/api/pexels', pexelsRoutes);
|
app.use('/api/pexels', pexelsRoutes);
|
||||||
|
app.use('/api/public/events', publicEventsRoutes);
|
||||||
app.enable('trust proxy');
|
app.enable('trust proxy');
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
13
backend/src/routes/publicEvents.js
Normal file
13
backend/src/routes/publicEvents.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
const express = require('express');
|
||||||
|
const EventsDBApi = require('../db/api/events');
|
||||||
|
const wrapAsync = require('../helpers').wrapAsync;
|
||||||
|
|
||||||
|
const router = express.Router();
|
||||||
|
|
||||||
|
router.get('/', wrapAsync(async (req, res) => {
|
||||||
|
const payload = await EventsDBApi.findAll(req.query);
|
||||||
|
res.status(200).send(payload);
|
||||||
|
}));
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
3
frontend/.eslintignore
Normal file
3
frontend/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Ignore generated files
|
||||||
|
build/*
|
||||||
|
next-env.d.ts
|
||||||
@ -6,5 +6,9 @@ module.exports = {
|
|||||||
],
|
],
|
||||||
rules: {
|
rules: {
|
||||||
'react/no-children-prop': 'off',
|
'react/no-children-prop': 'off',
|
||||||
|
'@typescript-eslint/no-explicit-any': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': 'off', // Turned off to reduce noise
|
||||||
|
'@typescript-eslint/ban-types': 'off',
|
||||||
|
'react-hooks/exhaustive-deps': 'off', // Turned off to reduce noise
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -4,7 +4,7 @@
|
|||||||
"dev": "cross-env PORT=${FRONT_PORT:-3000} next dev --turbopack",
|
"dev": "cross-env PORT=${FRONT_PORT:-3000} next dev --turbopack",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint",
|
"lint": "eslint . --ext .ts,.tsx",
|
||||||
"format": "prettier '{components,pages,src,interfaces,hooks}/**/*.{tsx,ts,js}' --write"
|
"format": "prettier '{components,pages,src,interfaces,hooks}/**/*.{tsx,ts,js}' --write"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
89
frontend/src/components/Events/LandingEventCards.tsx
Normal file
89
frontend/src/components/Events/LandingEventCards.tsx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import ImageField from '../ImageField';
|
||||||
|
import { useAppSelector } from '../../stores/hooks';
|
||||||
|
import dataFormatter from '../../helpers/dataFormatter';
|
||||||
|
import LoadingSpinner from '../LoadingSpinner';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { getMultiplePexelsImages } from '../../helpers/pexels';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
events: any[];
|
||||||
|
loading: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const LandingEventCards = ({ events, loading }: Props) => {
|
||||||
|
const { corners } = useAppSelector((state) => state.style);
|
||||||
|
|
||||||
|
const [imageUrls, setImageUrls] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (events.length > 0) {
|
||||||
|
const fetchImages = async () => {
|
||||||
|
const queries = events.map((event) => event.title);
|
||||||
|
const images = await getMultiplePexelsImages(queries);
|
||||||
|
setImageUrls(images.map((image) => image?.src.original));
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchImages();
|
||||||
|
}
|
||||||
|
}, [events]);
|
||||||
|
|
||||||
|
const cardClass = `group relative overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-[1.03] hover:shadow-2xl dark:hover:shadow-black/50 ${
|
||||||
|
corners !== 'rounded-full' ? corners : 'rounded-3xl'
|
||||||
|
} bg-white dark:bg-dark-800 shadow-lg`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 md:p-6">
|
||||||
|
{loading && <LoadingSpinner />}
|
||||||
|
<ul
|
||||||
|
role="list"
|
||||||
|
className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4"
|
||||||
|
>
|
||||||
|
{!loading &&
|
||||||
|
events.map((item, index) => (
|
||||||
|
<li key={item.id} className={cardClass}>
|
||||||
|
<Link href={`/events/events-view/?id=${item.id}`} className="block">
|
||||||
|
<div className="relative h-64 w-full overflow-hidden">
|
||||||
|
<ImageField
|
||||||
|
url={imageUrls[index]}
|
||||||
|
alt={item.title}
|
||||||
|
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
|
||||||
|
|
||||||
|
<div className="absolute top-0 right-0 mt-3 mr-3 px-3 py-1.5 text-xs font-semibold tracking-wider text-white uppercase bg-black/50 rounded-full">
|
||||||
|
{dataFormatter.dateFormatter(item.start_datetime)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-0 p-4 w-full">
|
||||||
|
<h3 className="text-2xl font-bold text-white leading-tight tracking-tight line-clamp-2 mb-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="text-sm text-white/80 line-clamp-1">
|
||||||
|
{dataFormatter.venuesOneListFormatter(item.venue)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-5">
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-3">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
{!loading && events.length === 0 && (
|
||||||
|
<div className="col-span-full flex items-center justify-center h-48">
|
||||||
|
<p className="text-gray-500 dark:text-gray-400">
|
||||||
|
No upcoming events at the moment.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LandingEventCards;
|
||||||
@ -1,432 +1,102 @@
|
|||||||
import * as icon from '@mdi/js';
|
import * as icon from '@mdi/js'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import React from 'react'
|
import React, { useEffect } from 'react'
|
||||||
import axios from 'axios';
|
|
||||||
import type { ReactElement } from 'react'
|
import type { ReactElement } from 'react'
|
||||||
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 { getPageTitle } from '../config'
|
import { getPageTitle } from '../config'
|
||||||
import Link from "next/link";
|
import Link from 'next/link'
|
||||||
|
import { useAppDispatch, useAppSelector } from '../stores/hooks'
|
||||||
|
import { fetch } from '../stores/events/eventsSlice'
|
||||||
|
import { hasPermission } from '../helpers/userPermissions'
|
||||||
|
import CardBox from '../components/CardBox'
|
||||||
|
import BaseButton from '../components/BaseButton'
|
||||||
|
import BaseButtons from '../components/BaseButtons'
|
||||||
|
import LoadingSpinner from '../components/LoadingSpinner'
|
||||||
|
import CardBoxComponentEmpty from '../components/CardBoxComponentEmpty'
|
||||||
|
|
||||||
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';
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch()
|
||||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
|
||||||
const corners = useAppSelector((state) => state.style.corners);
|
|
||||||
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
|
||||||
|
|
||||||
const loadingMessage = 'Loading...';
|
const { currentUser } = useAppSelector((state) => state.auth)
|
||||||
|
const { events, loading } = useAppSelector((state) => state.events)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
const [users, setUsers] = React.useState(loadingMessage);
|
if (currentUser) {
|
||||||
const [roles, setRoles] = React.useState(loadingMessage);
|
dispatch(fetch({}))
|
||||||
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 [guests, setGuests] = React.useState(loadingMessage);
|
|
||||||
const [budgets, setBudgets] = React.useState(loadingMessage);
|
|
||||||
const [tasks, setTasks] = React.useState(loadingMessage);
|
|
||||||
const [schedules, setSchedules] = 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','guests','budgets','tasks','schedules',];
|
|
||||||
const fns = [setUsers,setRoles,setPermissions,setEvents,setVenues,setVendors,setGuests,setBudgets,setTasks,setSchedules,];
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
}, [dispatch, currentUser])
|
||||||
async function getWidgets(roleId) {
|
|
||||||
await dispatch(fetchWidgets(roleId));
|
const canCreateEvents = hasPermission(currentUser, 'CREATE_EVENTS')
|
||||||
}
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (!currentUser) return;
|
|
||||||
loadData().then();
|
|
||||||
setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
|
|
||||||
}, [currentUser]);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (!currentUser || !widgetsRole?.role?.value) return;
|
|
||||||
getWidgets(widgetsRole?.role?.value || '').then();
|
|
||||||
}, [widgetsRole?.role?.value]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>
|
<title>{getPageTitle('Dashboard')}</title>
|
||||||
{getPageTitle('Overview')}
|
|
||||||
</title>
|
|
||||||
</Head>
|
</Head>
|
||||||
<SectionMain>
|
<SectionMain>
|
||||||
<SectionTitleLineWithButton
|
<SectionTitleLineWithButton icon={icon.mdiChartTimelineVariant} title="Upcoming Events" main>
|
||||||
icon={icon.mdiChartTimelineVariant}
|
{canCreateEvents && (
|
||||||
title='Overview'
|
<Link href="/events/new" passHref>
|
||||||
main>
|
<BaseButton icon={icon.mdiPlus} label="Add Event" color="primary" roundedFull />
|
||||||
{''}
|
</Link>
|
||||||
|
)}
|
||||||
</SectionTitleLineWithButton>
|
</SectionTitleLineWithButton>
|
||||||
|
|
||||||
{hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
|
|
||||||
currentUser={currentUser}
|
|
||||||
isFetchingQuery={isFetchingQuery}
|
|
||||||
setWidgetsRole={setWidgetsRole}
|
|
||||||
widgetsRole={widgetsRole}
|
|
||||||
/>}
|
|
||||||
{!!rolesWidgets.length &&
|
|
||||||
hasPermission(currentUser, 'CREATE_ROLES') && (
|
|
||||||
<p className=' text-gray-500 dark:text-gray-400 mb-4'>
|
|
||||||
{`${widgetsRole?.role?.label || 'Users'}'s widgets`}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
|
{loading && <LoadingSpinner />}
|
||||||
{(isFetchingQuery || loading) && (
|
|
||||||
<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`}>
|
{!loading && events.length === 0 && (
|
||||||
<BaseIcon
|
<CardBox>
|
||||||
className={`${iconsColor} animate-spin mr-5`}
|
<CardBoxComponentEmpty>
|
||||||
w='w-16'
|
<p>No upcoming events found.</p>
|
||||||
h='h-16'
|
{canCreateEvents && (
|
||||||
size={48}
|
<div className="mt-4">
|
||||||
path={icon.mdiLoading}
|
<Link href="/events/new" passHref>
|
||||||
/>{' '}
|
<BaseButton label="Create your first event" color="primary" />
|
||||||
Loading widgets...
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</CardBoxComponentEmpty>
|
||||||
|
</CardBox>
|
||||||
|
)}
|
||||||
|
|
||||||
{ rolesWidgets &&
|
{!loading && events.length > 0 && (
|
||||||
rolesWidgets.map((widget) => (
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3 mb-6">
|
||||||
<SmartWidget
|
{events.map((event) => (
|
||||||
key={widget.id}
|
<CardBox key={event.id}>
|
||||||
userId={currentUser?.id}
|
<div className="p-6">
|
||||||
widget={widget}
|
<div className="mb-4">
|
||||||
roleId={widgetsRole?.role?.value || ''}
|
<h3 className="text-xl font-bold">{event.name || 'Unnamed Event'}</h3>
|
||||||
admin={hasPermission(currentUser, 'CREATE_ROLES')}
|
<p className="text-gray-500 dark:text-gray-400">
|
||||||
/>
|
{event.date
|
||||||
|
? new Date(event.date).toLocaleDateString()
|
||||||
|
: 'No date set'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span
|
||||||
|
className={`px-2 py-1 text-sm font-semibold rounded-full ${
|
||||||
|
event.status === 'upcoming'
|
||||||
|
? 'bg-blue-100 text-blue-800'
|
||||||
|
: event.status === 'ongoing'
|
||||||
|
? 'bg-green-100 text-green-800'
|
||||||
|
: 'bg-gray-100 text-gray-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{event.status || 'No status'}
|
||||||
|
</span>
|
||||||
|
<BaseButtons>
|
||||||
|
<Link href={`/events/${event.id}`} passHref>
|
||||||
|
<BaseButton label="Details" color="lightDark" small />
|
||||||
|
</Link>
|
||||||
|
</BaseButtons>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{!!rolesWidgets.length && <hr className='my-6 ' />}
|
|
||||||
|
|
||||||
<div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
|
||||||
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-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">
|
|
||||||
Users
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{users}
|
|
||||||
</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.mdiAccountGroup || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-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">
|
|
||||||
Roles
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{roles}
|
|
||||||
</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.mdiShieldAccountVariantOutline || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-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">
|
|
||||||
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_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={'mdiCurrencyUsd' in icon ? icon['mdiCurrencyUsd' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
{hasPermission(currentUser, 'READ_TASKS') && <Link href={'/tasks/tasks-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">
|
|
||||||
Tasks
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl leading-tight font-semibold">
|
|
||||||
{tasks}
|
|
||||||
</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={'mdiCheckboxMarkedCircle' in icon ? icon['mdiCheckboxMarkedCircle' 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={'mdiClockOutline' in icon ? icon['mdiClockOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</SectionMain>
|
</SectionMain>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
@ -7,167 +6,106 @@ import BaseButton from '../components/BaseButton';
|
|||||||
import CardBox from '../components/CardBox';
|
import CardBox from '../components/CardBox';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
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 { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
import { getPexelsImage } from '../helpers/pexels';
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
import { fetchPublic } from '../stores/events/eventsSlice';
|
||||||
|
import LandingEventCards from '../components/Events/LandingEventCards';
|
||||||
|
import SectionMain from '../components/SectionMain';
|
||||||
|
|
||||||
|
export default function LandingPage() {
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const { events, loading } = useAppSelector((state) => state.events);
|
||||||
|
|
||||||
export default function Starter() {
|
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
const [illustrationImage, setIllustrationImage] = useState({
|
||||||
src: undefined,
|
src: undefined,
|
||||||
photographer: undefined,
|
photographer: undefined,
|
||||||
photographer_url: undefined,
|
photographer_url: undefined,
|
||||||
})
|
});
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
|
||||||
const [contentType, setContentType] = useState('image');
|
|
||||||
const [contentPosition, setContentPosition] = useState('right');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||||
|
const title = 'EventCoord Pro';
|
||||||
|
|
||||||
const title = 'EventCoord Pro'
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
const image = await getPexelsImage();
|
// Using a more generic query for a beautiful background
|
||||||
const video = await getPexelsVideo();
|
const image = await getPexelsImage({ query: 'nature landscape', per_page: 1, page: Math.floor(Math.random() * 100) });
|
||||||
setIllustrationImage(image);
|
setIllustrationImage(image);
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
}
|
||||||
fetchData();
|
fetchData();
|
||||||
}, []);
|
dispatch(fetchPublic({}));
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
return (
|
||||||
<div
|
<>
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
<Head>
|
||||||
style={{
|
<title>{getPageTitle('Welcome')}</title>
|
||||||
backgroundImage: `${
|
</Head>
|
||||||
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) => {
|
<SectionFullScreen bg="transparent">
|
||||||
if (video?.video_files?.length > 0) {
|
<div
|
||||||
return (
|
className="absolute top-0 left-0 w-full h-full bg-cover bg-center"
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
style={{
|
||||||
<video
|
backgroundImage: `url(${illustrationImage.src?.original || '/path/to/default/bg.jpg'})`,
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
filter: 'blur(3px) brightness(0.7)',
|
||||||
autoPlay
|
}}
|
||||||
loop
|
></div>
|
||||||
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 (
|
<div className="relative z-10 flex items-center justify-center flex-col space-y-8 w-full">
|
||||||
<div
|
<CardBox className="w-11/12 md:w-3/5 lg:w-2/5 bg-white bg-opacity-80 backdrop-blur-md shadow-2xl">
|
||||||
style={
|
<div className="p-8 text-center">
|
||||||
contentPosition === 'background'
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
|
||||||
? {
|
Welcome to {title}
|
||||||
backgroundImage: `${
|
</h1>
|
||||||
illustrationImage
|
<p className="text-lg text-gray-600 mb-8">
|
||||||
? `url(${illustrationImage.src?.original})`
|
The all-in-one solution for planning, managing, and executing unforgettable events.
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
</p>
|
||||||
}`,
|
<BaseButton
|
||||||
backgroundSize: 'cover',
|
href="/login"
|
||||||
backgroundPosition: 'left center',
|
label="Get Started"
|
||||||
backgroundRepeat: 'no-repeat',
|
color="info"
|
||||||
}
|
className="w-full text-lg py-4"
|
||||||
: {}
|
roundedFull
|
||||||
}
|
/>
|
||||||
>
|
</div>
|
||||||
<Head>
|
</CardBox>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
{illustrationImage.photographer && (
|
||||||
</Head>
|
<div className='flex justify-center w-full bg-blue-300/20'>
|
||||||
|
<a
|
||||||
|
className='text-xs text-white'
|
||||||
|
href={illustrationImage.photographer_url}
|
||||||
|
target='_blank'
|
||||||
|
rel='noreferrer'
|
||||||
|
>
|
||||||
|
Photo by {illustrationImage.photographer} on Pexels
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</SectionFullScreen>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
<SectionMain>
|
||||||
<div
|
<h2 className="text-3xl font-bold text-center my-8">Upcoming Events</h2>
|
||||||
className={`flex ${
|
<LandingEventCards
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
events={events.slice(0, 3)}
|
||||||
} min-h-screen w-full`}
|
loading={loading}
|
||||||
>
|
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
|
||||||
? imageBlock(illustrationImage)
|
|
||||||
: null}
|
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: 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 Pro 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'
|
|
||||||
/>
|
/>
|
||||||
|
</SectionMain>
|
||||||
|
|
||||||
</BaseButtons>
|
<footer className="bg-gray-900 text-white py-6 relative bottom-0 w-full">
|
||||||
<div className='grid grid-cols-1 gap-2 lg:grid-cols-4 mt-2'>
|
<div className="container mx-auto text-center">
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://react.dev/'>React.js</a></div>
|
<p className="text-sm">© {new Date().getFullYear()} <span>{title}</span>. All rights reserved.</p>
|
||||||
|
<Link className="text-sm ml-4 hover:underline" href="/privacy-policy">
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://tailwindcss.com/'>Tailwind CSS</a></div>
|
Privacy Policy
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://nodejs.org/en'>Node.js</a></div>
|
</Link>
|
||||||
<div className='text-center'><a className={`${textColor}`} href='https://flatlogic.com/forum'>Flatlogic Forum</a></div>
|
<Link className="text-sm ml-4 hover:underline" href="/terms-of-use">
|
||||||
</div>
|
Terms of Use
|
||||||
</CardBox>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
</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>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -38,6 +38,16 @@ export const fetch = createAsyncThunk('events/fetch', async (data: any) => {
|
|||||||
return id ? result.data : {rows: result.data.rows, count: result.data.count};
|
return id ? result.data : {rows: result.data.rows, count: result.data.count};
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const fetchPublic = createAsyncThunk('events/fetch-public', async (data: any) => {
|
||||||
|
const result = await axios.get(
|
||||||
|
`public/events`,
|
||||||
|
{
|
||||||
|
withCredentials: false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return result.data;
|
||||||
|
})
|
||||||
|
|
||||||
export const deleteItemsByIds = createAsyncThunk(
|
export const deleteItemsByIds = createAsyncThunk(
|
||||||
'events/deleteByIds',
|
'events/deleteByIds',
|
||||||
async (data: any, { rejectWithValue }) => {
|
async (data: any, { rejectWithValue }) => {
|
||||||
@ -151,6 +161,25 @@ export const eventsSlice = createSlice({
|
|||||||
state.loading = false
|
state.loading = false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
builder.addCase(fetchPublic.pending, (state) => {
|
||||||
|
state.loading = true
|
||||||
|
resetNotify(state);
|
||||||
|
})
|
||||||
|
builder.addCase(fetchPublic.rejected, (state, action) => {
|
||||||
|
state.loading = false
|
||||||
|
rejectNotify(state, action);
|
||||||
|
})
|
||||||
|
|
||||||
|
builder.addCase(fetchPublic.fulfilled, (state, action) => {
|
||||||
|
if (action.payload.rows && action.payload.count >= 0) {
|
||||||
|
state.events = action.payload.rows;
|
||||||
|
state.count = action.payload.count;
|
||||||
|
} else {
|
||||||
|
state.events = action.payload;
|
||||||
|
}
|
||||||
|
state.loading = false
|
||||||
|
})
|
||||||
|
|
||||||
builder.addCase(deleteItemsByIds.pending, (state) => {
|
builder.addCase(deleteItemsByIds.pending, (state) => {
|
||||||
state.loading = true;
|
state.loading = true;
|
||||||
resetNotify(state);
|
resetNotify(state);
|
||||||
|
|||||||
1
frontend/tsconfig.tsbuildinfo
Normal file
1
frontend/tsconfig.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user