Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
fc419cf4bf |
@ -17,6 +17,7 @@ const searchRoutes = require('./routes/search');
|
||||
const pexelsRoutes = require('./routes/pexels');
|
||||
|
||||
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/file', fileRoutes);
|
||||
app.use('/api/pexels', pexelsRoutes);
|
||||
app.use('/api/public/events', publicEventsRoutes);
|
||||
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: {
|
||||
'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",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"lint": "eslint . --ext .ts,.tsx",
|
||||
"format": "prettier '{components,pages,src,interfaces,hooks}/**/*.{tsx,ts,js}' --write"
|
||||
},
|
||||
"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 React from 'react'
|
||||
import axios from 'axios';
|
||||
import React, { useEffect } from 'react'
|
||||
import type { ReactElement } from 'react'
|
||||
import LayoutAuthenticated from '../layouts/Authenticated'
|
||||
import SectionMain from '../components/SectionMain'
|
||||
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
|
||||
import BaseIcon from "../components/BaseIcon";
|
||||
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 dispatch = useAppDispatch();
|
||||
const iconsColor = useAppSelector((state) => state.style.iconsColor);
|
||||
const corners = useAppSelector((state) => state.style.corners);
|
||||
const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const loadingMessage = 'Loading...';
|
||||
const { currentUser } = useAppSelector((state) => state.auth)
|
||||
const { events, loading } = useAppSelector((state) => state.events)
|
||||
|
||||
|
||||
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 [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);
|
||||
}
|
||||
});
|
||||
});
|
||||
useEffect(() => {
|
||||
if (currentUser) {
|
||||
dispatch(fetch({}))
|
||||
}
|
||||
|
||||
async function getWidgets(roleId) {
|
||||
await dispatch(fetchWidgets(roleId));
|
||||
}
|
||||
React.useEffect(() => {
|
||||
if (!currentUser) return;
|
||||
loadData().then();
|
||||
setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
|
||||
}, [currentUser]);
|
||||
}, [dispatch, currentUser])
|
||||
|
||||
const canCreateEvents = hasPermission(currentUser, 'CREATE_EVENTS')
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!currentUser || !widgetsRole?.role?.value) return;
|
||||
getWidgets(widgetsRole?.role?.value || '').then();
|
||||
}, [widgetsRole?.role?.value]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
{getPageTitle('Overview')}
|
||||
</title>
|
||||
<title>{getPageTitle('Dashboard')}</title>
|
||||
</Head>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
icon={icon.mdiChartTimelineVariant}
|
||||
title='Overview'
|
||||
main>
|
||||
{''}
|
||||
<SectionTitleLineWithButton icon={icon.mdiChartTimelineVariant} title="Upcoming Events" main>
|
||||
{canCreateEvents && (
|
||||
<Link href="/events/new" passHref>
|
||||
<BaseButton icon={icon.mdiPlus} label="Add Event" color="primary" roundedFull />
|
||||
</Link>
|
||||
)}
|
||||
</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'>
|
||||
{(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`}>
|
||||
<BaseIcon
|
||||
className={`${iconsColor} animate-spin mr-5`}
|
||||
w='w-16'
|
||||
h='h-16'
|
||||
size={48}
|
||||
path={icon.mdiLoading}
|
||||
/>{' '}
|
||||
Loading widgets...
|
||||
{loading && <LoadingSpinner />}
|
||||
|
||||
{!loading && events.length === 0 && (
|
||||
<CardBox>
|
||||
<CardBoxComponentEmpty>
|
||||
<p>No upcoming events found.</p>
|
||||
{canCreateEvents && (
|
||||
<div className="mt-4">
|
||||
<Link href="/events/new" passHref>
|
||||
<BaseButton label="Create your first event" color="primary" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</CardBoxComponentEmpty>
|
||||
</CardBox>
|
||||
)}
|
||||
|
||||
{ rolesWidgets &&
|
||||
rolesWidgets.map((widget) => (
|
||||
<SmartWidget
|
||||
key={widget.id}
|
||||
userId={currentUser?.id}
|
||||
widget={widget}
|
||||
roleId={widgetsRole?.role?.value || ''}
|
||||
admin={hasPermission(currentUser, 'CREATE_ROLES')}
|
||||
/>
|
||||
{!loading && events.length > 0 && (
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3 mb-6">
|
||||
{events.map((event) => (
|
||||
<CardBox key={event.id}>
|
||||
<div className="p-6">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-xl font-bold">{event.name || 'Unnamed Event'}</h3>
|
||||
<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>
|
||||
|
||||
{!!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>
|
||||
</div>
|
||||
)}
|
||||
</SectionMain>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
@ -7,167 +6,106 @@ import BaseButton from '../components/BaseButton';
|
||||
import CardBox from '../components/CardBox';
|
||||
import SectionFullScreen from '../components/SectionFullScreen';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import BaseDivider from '../components/BaseDivider';
|
||||
import BaseButtons from '../components/BaseButtons';
|
||||
import { getPageTitle } from '../config';
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||
import { getPexelsImage } 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({
|
||||
src: undefined,
|
||||
photographer: 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 title = 'EventCoord Pro';
|
||||
|
||||
const title = 'EventCoord Pro'
|
||||
|
||||
// Fetch Pexels image/video
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage();
|
||||
const video = await getPexelsVideo();
|
||||
// Using a more generic query for a beautiful background
|
||||
const image = await getPexelsImage({ query: 'nature landscape', per_page: 1, page: Math.floor(Math.random() * 100) });
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
dispatch(fetchPublic({}));
|
||||
}, [dispatch]);
|
||||
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{getPageTitle('Welcome')}</title>
|
||||
</Head>
|
||||
|
||||
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>)
|
||||
}
|
||||
};
|
||||
<SectionFullScreen bg="transparent">
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-full bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: `url(${illustrationImage.src?.original || '/path/to/default/bg.jpg'})`,
|
||||
filter: 'blur(3px) brightness(0.7)',
|
||||
}}
|
||||
></div>
|
||||
|
||||
return (
|
||||
<div
|
||||
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>
|
||||
<title>{getPageTitle('Starter Page')}</title>
|
||||
</Head>
|
||||
<div className="relative z-10 flex items-center justify-center flex-col space-y-8 w-full">
|
||||
<CardBox className="w-11/12 md:w-3/5 lg:w-2/5 bg-white bg-opacity-80 backdrop-blur-md shadow-2xl">
|
||||
<div className="p-8 text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
|
||||
Welcome to {title}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 mb-8">
|
||||
The all-in-one solution for planning, managing, and executing unforgettable events.
|
||||
</p>
|
||||
<BaseButton
|
||||
href="/login"
|
||||
label="Get Started"
|
||||
color="info"
|
||||
className="w-full text-lg py-4"
|
||||
roundedFull
|
||||
/>
|
||||
</div>
|
||||
</CardBox>
|
||||
{illustrationImage.photographer && (
|
||||
<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'>
|
||||
<div
|
||||
className={`flex ${
|
||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
||||
} min-h-screen w-full`}
|
||||
>
|
||||
{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>
|
||||
<h2 className="text-3xl font-bold text-center my-8">Upcoming Events</h2>
|
||||
<LandingEventCards
|
||||
events={events.slice(0, 3)}
|
||||
loading={loading}
|
||||
/>
|
||||
</SectionMain>
|
||||
|
||||
</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>
|
||||
</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>
|
||||
);
|
||||
<footer className="bg-gray-900 text-white py-6 relative bottom-0 w-full">
|
||||
<div className="container mx-auto text-center">
|
||||
<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">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link className="text-sm ml-4 hover:underline" href="/terms-of-use">
|
||||
Terms of Use
|
||||
</Link>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||
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};
|
||||
})
|
||||
|
||||
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(
|
||||
'events/deleteByIds',
|
||||
async (data: any, { rejectWithValue }) => {
|
||||
@ -151,6 +161,25 @@ export const eventsSlice = createSlice({
|
||||
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) => {
|
||||
state.loading = true;
|
||||
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