Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
c01135257d |
@ -1,13 +0,0 @@
|
||||
node_modules
|
||||
npm-debug.log
|
||||
Dockerfile*
|
||||
docker-compose*
|
||||
.dockerignore
|
||||
.git
|
||||
.gitignore
|
||||
README.md
|
||||
LICENSE
|
||||
.vscode
|
||||
.next
|
||||
*.swp
|
||||
/scripts
|
33
.github/workflows/build.yml
vendored
@ -1,13 +1,15 @@
|
||||
name: Build Nginx-based docker image
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
concurrency:
|
||||
group: ${{ github.ref }}
|
||||
cancel-in-progress: true
|
||||
jobs:
|
||||
build-static-assets:
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 30
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
@ -22,32 +24,13 @@ jobs:
|
||||
registry: ${{ secrets.PRIVATE_REGISTRY_HOST }}
|
||||
username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
|
||||
password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
|
||||
|
||||
- name: Build and push intermediate stages (deps)
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
target: deps
|
||||
push: ${{ github.ref == 'refs/heads/main' }}
|
||||
tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
|
||||
cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
|
||||
cache-to: type=inline
|
||||
|
||||
- name: Build and push intermediate stages (builder)
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
target: builder
|
||||
push: ${{ github.ref == 'refs/heads/main' }}
|
||||
tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:builder
|
||||
cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:builder
|
||||
cache-to: type=inline
|
||||
|
||||
- name: Build and push (final)
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
context: .
|
||||
push: ${{ github.ref == 'refs/heads/main' }}
|
||||
tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
|
||||
cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
|
||||
push: ${{ github.event_name != 'pull_request' }}
|
||||
tags: |
|
||||
${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
|
||||
cache-from: type=registry,ref=user/app:latest
|
||||
cache-to: type=inline
|
5
.github/workflows/copyright_notice.yml
vendored
@ -3,9 +3,6 @@ on:
|
||||
pull_request:
|
||||
permissions:
|
||||
contents: write
|
||||
concurrency:
|
||||
group: ${{ github.ref }}
|
||||
cancel-in-progress: true
|
||||
jobs:
|
||||
copyright_notice:
|
||||
runs-on: ubuntu-latest
|
||||
@ -16,7 +13,7 @@ jobs:
|
||||
ref: ${{ github.head_ref }}
|
||||
- uses: VinnyBabuManjaly/copyright-action@v1.0.0
|
||||
with:
|
||||
CopyrightString: '/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/\n\n'
|
||||
CopyrightString: '/* Copyright (C) 2024 Manuel Bustillo*/\n\n'
|
||||
FileType: '.tsx, .jsx, .ts'
|
||||
Path: 'app/, config/, db/'
|
||||
IgnorePath: 'testfolder1/a/, testfolder3'
|
||||
|
11
.github/workflows/playwright.yml
vendored
@ -17,19 +17,14 @@ jobs:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: .nvmrc
|
||||
node-version: lts/*
|
||||
- name: Install dependencies
|
||||
run: npm install -g pnpm && pnpm install
|
||||
- name: Build the service that will be tested
|
||||
run: |
|
||||
pnpm run build
|
||||
cp -r public .next/standalone/
|
||||
cp -r .next/static .next/standalone/.next/
|
||||
run: npm run build
|
||||
- name: Install Playwright Browsers
|
||||
run: pnpm exec playwright install --with-deps
|
||||
- name: Run the service that will be tested
|
||||
run: HOSTNAME=127.0.0.1 node .next/standalone/server.js &
|
||||
- name: Wait for the service to be ready
|
||||
run: npx wait-on http://127.0.0.1:3000/default/ --timeout 30000
|
||||
run: npm run start &
|
||||
- name: Run Playwright tests
|
||||
run: pnpm exec playwright test
|
||||
|
2
.gitignore
vendored
@ -38,3 +38,5 @@ next-env.d.ts
|
||||
/playwright-report/
|
||||
/blob-report/
|
||||
/playwright/.cache/
|
||||
|
||||
*storybook.log
|
||||
|
20
.storybook/main.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import type { StorybookConfig } from "@storybook/nextjs";
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: [
|
||||
"../stories/**/*.mdx",
|
||||
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
|
||||
],
|
||||
addons: [
|
||||
"@storybook/addon-onboarding",
|
||||
"@storybook/addon-essentials",
|
||||
"@chromatic-com/storybook",
|
||||
"@storybook/addon-interactions",
|
||||
],
|
||||
framework: {
|
||||
name: "@storybook/nextjs",
|
||||
options: {},
|
||||
},
|
||||
staticDirs: ["../public"],
|
||||
};
|
||||
export default config;
|
14
.storybook/preview.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import type { Preview } from "@storybook/react";
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
@ -1,6 +1,6 @@
|
||||
# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
|
||||
|
||||
FROM node:24-alpine AS base
|
||||
FROM node:23-alpine AS base
|
||||
|
||||
# Install dependencies only when needed
|
||||
FROM base AS deps
|
||||
|
@ -1,28 +0,0 @@
|
||||
# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
|
||||
|
||||
FROM node:24-alpine AS base
|
||||
|
||||
# Install dependencies only when needed
|
||||
FROM base AS deps
|
||||
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
|
||||
# Install dependencies based on the preferred package manager
|
||||
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
|
||||
RUN \
|
||||
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
|
||||
elif [ -f package-lock.json ]; then npm ci; \
|
||||
elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
|
||||
else echo "Lockfile not found." && exit 1; \
|
||||
fi
|
||||
|
||||
COPY . /app/
|
||||
|
||||
ENV NODE_ENV development
|
||||
ENV NEXT_TELEMETRY_DISABLED 1
|
||||
|
||||
EXPOSE 3000
|
||||
ENV PORT=3000
|
||||
|
||||
CMD HOSTNAME="0.0.0.0" pnpm run dev
|
@ -1,45 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Expense, ExpenseSerializer } from '@/app/lib/expense';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import ExpenseFormDialog from '@/app/ui/components/expense-form-dialog';
|
||||
import ExpensesTable from '@/app/ui/expenses/table';
|
||||
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
||||
import { Suspense, useEffect, useState } from 'react';
|
||||
|
||||
export default function Page() {
|
||||
const refreshExpenses = () => {
|
||||
new AbstractApi<Expense>().getAll(new ExpenseSerializer(), (expenses: Expense[]) => {
|
||||
setExpenses(expenses);
|
||||
});
|
||||
}
|
||||
|
||||
const [expenses, setExpenses] = useState<Expense[]>([]);
|
||||
const [expenseBeingEdited, setExpenseBeingEdited] = useState<Expense | undefined>(undefined);
|
||||
useEffect(() => { refreshExpenses() }, []);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col w-full items-center justify-between">
|
||||
<button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
|
||||
<ExpenseFormDialog
|
||||
key={expenseBeingEdited?.id}
|
||||
onCreate={() => { refreshExpenses(); setExpenseBeingEdited(undefined) }}
|
||||
expense={expenseBeingEdited}
|
||||
visible={expenseBeingEdited !== undefined}
|
||||
onHide={() => { setExpenseBeingEdited(undefined) }}
|
||||
/>
|
||||
<Suspense fallback={<SkeletonTable />}>
|
||||
<ExpensesTable
|
||||
expenses={expenses}
|
||||
onUpdate={refreshExpenses}
|
||||
onEdit={(expense) => setExpenseBeingEdited(expense)}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,180 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi, } from '@/app/api/abstract-api';
|
||||
import { Group, GroupSerializer } from '@/app/lib/group';
|
||||
import { Guest, GuestSerializer } from '@/app/lib/guest';
|
||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||
import AffinitiesFormDialog from '@/app/ui/components/affinities-form-dialog';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import GroupFormDialog from '@/app/ui/components/group-form-dialog';
|
||||
import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
|
||||
import GroupsTable from '@/app/ui/groups/table';
|
||||
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
||||
import GuestsTable from '@/app/ui/guests/table';
|
||||
import { TabPanel, TabView } from 'primereact/tabview';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Suspense, useEffect, useRef, useState } from 'react';
|
||||
import InvitationsBoard from '@/app/ui/invitations/board';
|
||||
import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
|
||||
import { Entity } from '@/app/lib/definitions';
|
||||
|
||||
|
||||
export default function Page() {
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
|
||||
useEffect(() => {
|
||||
setSlug(getSlug());
|
||||
refreshGroups();
|
||||
refreshGuests();
|
||||
refreshInvitations();
|
||||
}, []);
|
||||
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
function refreshGuests() {
|
||||
new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
|
||||
setGuests(objects);
|
||||
});
|
||||
}
|
||||
|
||||
function refreshGroups() {
|
||||
new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
|
||||
setGroups(objects);
|
||||
});
|
||||
}
|
||||
|
||||
function refreshInvitations() {
|
||||
new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
|
||||
setInvitations(objects);
|
||||
});
|
||||
}
|
||||
|
||||
function resetAffinities() {
|
||||
fetch(`/api/${slug}/groups/affinities/reset`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
showAffinitiesResetSuccess();
|
||||
} else {
|
||||
console.error('Failed to reset affinities');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error resetting affinities:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function showAffinitiesResetSuccess() {
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Affinities reset',
|
||||
detail: 'All affinities have been reset to default values.'
|
||||
});
|
||||
}
|
||||
|
||||
const [groups, setGroups] = useState<Array<Group>>([]);
|
||||
const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
|
||||
|
||||
const [groupAffinitiesBeingEditted, setGroupAffinitiesBeingEditted] = useState<Group | undefined>(undefined);
|
||||
|
||||
const [guests, setGuests] = useState<Array<Guest>>([]);
|
||||
const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
|
||||
|
||||
const [invitations, setInvitations] = useState<Array<Invitation>>([]);
|
||||
|
||||
function updateList<T extends Entity>(originalList: T[], element: T): T[] {
|
||||
{
|
||||
const index = originalList.findIndex(g => g.id === element?.id);
|
||||
if (index !== -1) {
|
||||
// Replace existing element
|
||||
return [
|
||||
element!,
|
||||
...originalList.slice(0, index),
|
||||
...originalList.slice(index + 1)
|
||||
];
|
||||
} else {
|
||||
// Add new element at the start
|
||||
return [element!, ...originalList];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<TabView>
|
||||
<TabPanel header="Guests" leftIcon="pi pi-users mx-2">
|
||||
<div className="flex flex-col w-full items-center justify-between">
|
||||
<button onClick={() => setGuestBeingEdited({})} className={classNames('primary')}>Add new</button>
|
||||
<GuestFormDialog
|
||||
key={guestBeingEdited?.id}
|
||||
groups={groups}
|
||||
onCreate={(newGuest) => {
|
||||
setGuests(guests => updateList(guests, newGuest));
|
||||
setGuestBeingEdited(undefined);
|
||||
}}
|
||||
guest={guestBeingEdited}
|
||||
visible={guestBeingEdited !== undefined}
|
||||
onHide={() => { setGuestBeingEdited(undefined) }}
|
||||
/>
|
||||
<Suspense fallback={<SkeletonTable />}>
|
||||
<GuestsTable
|
||||
guests={guests}
|
||||
onUpdate={refreshGuests}
|
||||
onEdit={(guest) => setGuestBeingEdited(guest)}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</ TabPanel>
|
||||
<TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
|
||||
<div className="flex flex-col w-full items-center justify-between">
|
||||
|
||||
<div>
|
||||
<Toast ref={toast} />
|
||||
<button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
|
||||
<button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
|
||||
</div>
|
||||
|
||||
<GroupFormDialog
|
||||
key={groupBeingEdited?.id}
|
||||
groups={groups}
|
||||
onCreate={(newGroup) => {
|
||||
setGroups(groups => updateList(groups, newGroup));
|
||||
setGroupBeingEdited(undefined)
|
||||
}}
|
||||
group={groupBeingEdited}
|
||||
visible={groupBeingEdited !== undefined}
|
||||
onHide={() => { setGroupBeingEdited(undefined) }}
|
||||
/>
|
||||
|
||||
<AffinitiesFormDialog
|
||||
groups={groups}
|
||||
group={groupAffinitiesBeingEditted}
|
||||
visible={groupAffinitiesBeingEditted !== undefined}
|
||||
onHide={() => { setGroupAffinitiesBeingEditted(undefined) }}
|
||||
/>
|
||||
|
||||
<Suspense fallback={<SkeletonTable />}>
|
||||
<GroupsTable
|
||||
groups={groups}
|
||||
onUpdate={refreshGroups}
|
||||
onEdit={(group) => setGroupBeingEdited(group)}
|
||||
onEditAffinities={(group) => setGroupAffinitiesBeingEditted(group)}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</ TabPanel>
|
||||
<TabPanel header="Invitations" leftIcon="pi pi-envelope mx-2">
|
||||
<InvitationsBoard guests={guests} invitations={invitations} />
|
||||
</TabPanel>
|
||||
</ TabView>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
@ -1,26 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { GlobalSummary as Summary } from '@/app/lib/definitions';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import GlobalSummary from '@/app/ui/dashboard/global-summary';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function Page() {
|
||||
const [globalSummary, setGlobalSummary] = useState<Summary | undefined>(undefined);
|
||||
|
||||
function refreshSummary() {
|
||||
fetch(`/api/${getSlug()}/summary`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setGlobalSummary(data);
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(refreshSummary, []);
|
||||
|
||||
return (
|
||||
globalSummary && <GlobalSummary summary={globalSummary} />
|
||||
);
|
||||
}
|
@ -1,44 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
|
||||
import Arrangement from '@/app/ui/arrangements/arrangement';
|
||||
import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import React, { useRef, useState } from 'react';
|
||||
|
||||
export default function Page() {
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const show = () => {
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Simulation created',
|
||||
detail: 'Table distributions will be calculated shortly, please come back in some minutes'
|
||||
});
|
||||
};
|
||||
|
||||
const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
|
||||
|
||||
function createSimulation() {
|
||||
const api = new AbstractApi<TableSimulation>();
|
||||
const serializer = new TableSimulationSerializer();
|
||||
api.create(serializer, new TableSimulation(), show);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="flex flex-col w-full items-center justify-between">
|
||||
<Toast ref={toast} />
|
||||
<button onClick={createSimulation} className={classNames('primary')}>Add new</button>
|
||||
</div>
|
||||
|
||||
<ArrangementsTable onArrangementSelected={setCurrentArrangement} />
|
||||
{currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
|
||||
</>
|
||||
)
|
||||
}
|
@ -1,65 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import { Website, WebsiteSerializer } from '@/app/lib/website';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Tiptap from '../../../components/Tiptap';
|
||||
|
||||
|
||||
export default function Page() {
|
||||
|
||||
const [website, setWebsite] = useState<Website>()
|
||||
const api = new AbstractApi<Website>();
|
||||
const serializer = new WebsiteSerializer();
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => { setSlug(getSlug()) }, []);
|
||||
|
||||
const [iframeKey, setIframeKey] = useState<number>(Math.random());
|
||||
|
||||
const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.get(serializer, undefined, (loadedWebsite) => {
|
||||
setWebsite(loadedWebsite);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const updateWebsite = (newContent: string) => {
|
||||
// Debounce API update: send after 500ms of no further changes
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
setTimeoutId(
|
||||
setTimeout(() => {
|
||||
api.update(serializer, new Website('', newContent), () => {
|
||||
setIframeKey(Math.random()); // Change key to force iframe reload
|
||||
});
|
||||
}, 500)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className="w-1/2 border rounded-lg p-4">
|
||||
<Tiptap
|
||||
key={website?.content ?? 'empty'}
|
||||
content={website?.content || ''}
|
||||
onUpdate={updateWebsite}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 border rounded-lg p-4 ml-4">
|
||||
<iframe
|
||||
key={iframeKey}
|
||||
src={`/${slug}/site`}
|
||||
title="Website Preview"
|
||||
className="w-full h-[80vh] rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,40 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import LoginForm from '@/app/ui/components/login-form';
|
||||
import RegistrationForm from '@/app/ui/components/registration-form';
|
||||
import { useParams } from 'next/navigation'
|
||||
import { useEffect } from 'react';
|
||||
import { retrieveCSRFToken } from '../api/authentication';
|
||||
import { getCsrfToken } from '../lib/utils';
|
||||
|
||||
export default async function Page() {
|
||||
const params = useParams<{ slug: string }>()
|
||||
|
||||
useEffect(() => {
|
||||
if (getCsrfToken() == 'unknown') {
|
||||
retrieveCSRFToken();
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('slug', params.slug);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col p-6">
|
||||
<div className="flex flex-row">
|
||||
<div className="w-1/2">
|
||||
Already have an account? Sign in
|
||||
<LoginForm />
|
||||
</div>
|
||||
|
||||
<div className="w-1/2">
|
||||
Don't have an account? Register now!
|
||||
<RegistrationForm />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
@ -1,119 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { AbstractApi } from "@/app/api/abstract-api";
|
||||
import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { FloatLabel } from "primereact/floatlabel";
|
||||
import { Dropdown } from "primereact/dropdown";
|
||||
import { Guest, GuestSerializer, GuestStatus } from "@/app/lib/guest";
|
||||
import { Button } from "primereact/button";
|
||||
|
||||
type FormResponse = {
|
||||
attendance: GuestStatus;
|
||||
};
|
||||
|
||||
function GuestForm({ guest, idx }: { guest: Guest, idx: number }) {
|
||||
const [response, setResponse] = useState<FormResponse>({
|
||||
attendance: guest.status!
|
||||
});
|
||||
|
||||
const [pendingChanges, setPendingChanges] = useState(false);
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
console.log('GuestForm response', response.attendance);
|
||||
|
||||
const attendanceOptions: { name: string, code: GuestStatus }[] = [
|
||||
{
|
||||
name: 'Attending',
|
||||
code: 'confirmed'
|
||||
},
|
||||
{
|
||||
name: 'Declined',
|
||||
code: 'declined'
|
||||
},
|
||||
{
|
||||
name: 'Tentative',
|
||||
code: 'tentative'
|
||||
}
|
||||
];
|
||||
|
||||
const api = new AbstractApi<Guest>();
|
||||
const serializer = new GuestSerializer();
|
||||
|
||||
const submitForm = () => {
|
||||
setSending(true);
|
||||
setPendingChanges(false);
|
||||
api.update(serializer, {
|
||||
id: guest.id!,
|
||||
status: response.attendance,
|
||||
}, () => setSending(false));
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={guest.id}
|
||||
className={`px-2 py-6 flex flex-col items-center ${idx !== 0 ? 'border-t border-gray-300' : ''}`}
|
||||
>
|
||||
<h2 className="m-2 text-xl font-semibold">{guest.name}</h2>
|
||||
|
||||
<Dropdown
|
||||
value={response.attendance}
|
||||
options={attendanceOptions}
|
||||
optionLabel="name"
|
||||
optionValue="code"
|
||||
className="rounded-md w-full max-w-xs border border-gray-300"
|
||||
checkmark={true}
|
||||
highlightOnSelect={false}
|
||||
onChange={(e) => {
|
||||
setPendingChanges(true);
|
||||
setResponse({ ...response, attendance: e.value })
|
||||
}}
|
||||
/>
|
||||
|
||||
<Button
|
||||
label="Save"
|
||||
icon="pi pi-save"
|
||||
loading={sending}
|
||||
onClick={submitForm}
|
||||
disabled={!pendingChanges || sending}
|
||||
className="mt-4 max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
const params = useParams<{ slug: string, id: string }>()
|
||||
|
||||
const [invitation, setInvitation] = useState<Invitation>();
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('slug', params.slug);
|
||||
|
||||
const api = new AbstractApi<Invitation>();
|
||||
const serializer = new InvitationSerializer();
|
||||
|
||||
api.get(serializer, params.id, (invitation: Invitation) => {
|
||||
setInvitation(invitation);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
<h1 className="text-2xl font-bold mb-4">Invitation</h1>
|
||||
{invitation ? (
|
||||
<div>
|
||||
<p>We have reserved {invitation.guests.length} seats in your honor. Please, confirm attendance submitting the following form:</p>
|
||||
{invitation.guests.map((guest, idx) => (
|
||||
<GuestForm key={guest.id} guest={guest} idx={idx} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,41 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import SideNav from '@/app/ui/dashboard/sidenav';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex h-screen flex-col">
|
||||
<div className="w-full lg:h-72 h-36 relative">
|
||||
<Image
|
||||
src="/header.png"
|
||||
alt="Header"
|
||||
fill
|
||||
style={{ objectFit: 'cover', objectPosition: 'center', zIndex: 0 }}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-grow flex items-center justify-center lg:p-24 py-8 bg-[#e1d5c7] relative">
|
||||
<div className="absolute left-1/2 lg:top-24 top-8 z-10 -translate-x-1/2 -translate-y-1/2 flex justify-center w-full pointer-events-none w-12 h-12 lg:w-24 lg:h-24">
|
||||
<Image
|
||||
src="/stamp.png"
|
||||
alt="Stamp"
|
||||
width={120}
|
||||
height={120}
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl w-full h-full bg-[#f9f9f7] shadow-lg">
|
||||
<div
|
||||
className="max-w-4xl lg:m-6 m-3 lg:px-6 px-3 lg:py-24 py-2 border-2 border-[#d3d3d1] rounded-xl text-[#958971] flex justify-center"
|
||||
style={{ height: 'calc(100% - 3rem)' }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,34 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Website, WebsiteSerializer } from '@/app/lib/website';
|
||||
import { useState, useEffect } from 'react';
|
||||
import DOMPurify from "dompurify";
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function Page() {
|
||||
const params = useParams<{ slug: string }>()
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('slug', params.slug);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const [websiteContent, setWebsiteContent] = useState<string>("");
|
||||
|
||||
const api = new AbstractApi<Website>();
|
||||
const serializer = new WebsiteSerializer();
|
||||
|
||||
useEffect(() => {
|
||||
api.get(serializer, undefined, (loadedWebsite) => {
|
||||
setWebsiteContent(loadedWebsite.content || "");
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(websiteContent) }} />
|
||||
);
|
||||
}
|
@ -1,113 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Entity } from '@/app/lib/definitions';
|
||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||
|
||||
|
||||
export interface Api<T extends Entity> {
|
||||
getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void;
|
||||
get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
|
||||
create(serializable: Serializable<T>, object: T, callback: (object: T) => void): void;
|
||||
update(serializable: Serializable<T>, object: T, callback: () => void): void;
|
||||
destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
|
||||
|
||||
post(serializable: Serializable<T>, path: string, callback: () => void): void;
|
||||
}
|
||||
|
||||
export interface Serializable<T> {
|
||||
fromJson(json: any): T;
|
||||
toJson(object: T): string;
|
||||
apiPath(): string;
|
||||
}
|
||||
|
||||
export class AbstractApi<T extends Entity> implements Api<T> {
|
||||
getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void {
|
||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
callback(data.map((record: any) => {
|
||||
return serializable.fromJson(record);
|
||||
}));
|
||||
}, (error) => {
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
getAllPdf(serializable: Serializable<T>, callback: () => void): void {
|
||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
|
||||
headers: {
|
||||
'Accept': 'application/pdf',
|
||||
}
|
||||
}).then(res => res.blob())
|
||||
.then(blob => {
|
||||
var file = window.URL.createObjectURL(blob);
|
||||
window.location.assign(file);
|
||||
});
|
||||
}
|
||||
|
||||
get(serializable: Serializable<T>, id: (string | undefined), callback: (object: T) => void): void {
|
||||
const endpoint = id ? `/api/${getSlug()}/${serializable.apiPath()}/${id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
|
||||
fetch(endpoint)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
callback(serializable.fromJson(data));
|
||||
}, (error) => {
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
update(serializable: Serializable<T>, object: T, callback: (updatedObject: T) => void): void {
|
||||
const endpoint = object.id ? `/api/${getSlug()}/${serializable.apiPath()}/${object.id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
|
||||
|
||||
fetch(endpoint, {
|
||||
method: 'PUT',
|
||||
body: serializable.toJson(object),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
}).then((response) => response.json())
|
||||
.then((data) => {
|
||||
callback(serializable.fromJson(data));
|
||||
})
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => void): void {
|
||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
|
||||
method: 'POST',
|
||||
body: serializable.toJson(object),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
callback(serializable.fromJson(data));
|
||||
})
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
destroy(serializable: Serializable<T>, object: T, callback: () => void): void {
|
||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
}).then(callback)
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
post(serializable: Serializable<T>, path: string, callback: () => void): void {
|
||||
fetch(`/api/${getSlug()}/${serializable.apiPath()}/${path}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
}).then(callback)
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
}
|
@ -1,86 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { asArray, getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||
import { Captcha, StructuredErrors, User } from '@/app/lib/definitions';
|
||||
|
||||
export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
|
||||
return fetch(`/api/${getSlug()}/users/sign_in`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ user: { email, password } }),
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data: any) => {
|
||||
console.log(data);
|
||||
onLogin({
|
||||
id: data.id || '',
|
||||
email: data.email || '',
|
||||
});
|
||||
})
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
export function logout({ onLogout }: { onLogout: () => void }) {
|
||||
fetch(`/api/${getSlug()}/users/sign_out`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
}).then(onLogout)
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
function flattenErrors(errors: StructuredErrors): string[] {
|
||||
if (errors instanceof Array) {
|
||||
return errors;
|
||||
}
|
||||
return Object.keys(errors).map((key) => {
|
||||
return `${key}: ${asArray(errors[key]).join(', ')}`;
|
||||
});
|
||||
}
|
||||
|
||||
// At this moment we're making an initial request to get a valid CSRF token
|
||||
export function retrieveCSRFToken() {
|
||||
return fetch(`/api/token`, {
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
}).then((response) => { return null });
|
||||
}
|
||||
|
||||
export function register({ slug, email, password, passwordConfirmation, captcha, onRegister, onError }: {
|
||||
slug: string,
|
||||
email: string,
|
||||
password: string,
|
||||
passwordConfirmation: string,
|
||||
captcha: Captcha,
|
||||
onRegister: () => void,
|
||||
onError: (errors: string[]) => void
|
||||
}) {
|
||||
fetch(`/api/${slug}/users`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(
|
||||
{
|
||||
user: { email, password, password_confirmation: passwordConfirmation },
|
||||
captcha: { id: captcha.id, answer: captcha.answer }
|
||||
}
|
||||
),
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
}).then((response) => {
|
||||
if (response.ok) {
|
||||
response.json().then(onRegister);
|
||||
} else {
|
||||
response.json().then((data: any) => {
|
||||
onError(data.errors && flattenErrors(data.errors) || [data.error]);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
@ -1,19 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { data } from "autoprefixer";
|
||||
import { getCsrfToken } from "../lib/utils";
|
||||
|
||||
export function getCaptchaChallenge({onRetrieve}: {onRetrieve: (id: string, url: string) => void}){
|
||||
return fetch('/api/captcha', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data: any) => {
|
||||
onRetrieve(data.id, data.media_url)
|
||||
})
|
||||
.catch((error) => console.error(error));
|
||||
}
|
@ -1,7 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export function GET() {
|
||||
return NextResponse.json({});
|
||||
}
|
@ -1,21 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { TableArrangement } from '@/app/lib/definitions';
|
||||
import { getSlug } from '../lib/utils';
|
||||
|
||||
export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
|
||||
fetch(`/api/${getSlug()}/tables_arrangements`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
onLoad && onLoad(data.map((record: any) => {
|
||||
return ({
|
||||
id: record.id,
|
||||
name: record.name,
|
||||
discomfort: record.discomfort,
|
||||
valid: record.valid,
|
||||
});
|
||||
}));
|
||||
}, (error) => {
|
||||
return [];
|
||||
});
|
||||
}
|
@ -1,22 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { useEditor, EditorContent } from '@tiptap/react'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
|
||||
const Tiptap = ({ content, onUpdate }: { content: string, onUpdate: (newContent:string) => void }) => {
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [StarterKit],
|
||||
content: content || '<p>Type something here...</p>',
|
||||
onUpdate({ editor }) {
|
||||
onUpdate(editor.getHTML());
|
||||
},
|
||||
immediatelyRender: false,
|
||||
})
|
||||
|
||||
return <EditorContent editor={editor} />
|
||||
}
|
||||
|
||||
export default Tiptap
|
16
app/dashboard/expenses/page.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import ExpenseSummary from '@/app/ui/expenses/summary';
|
||||
|
||||
export default function Page () {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="w-full items-center justify-between">
|
||||
<h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
|
||||
<h2 className={`${lusitana.className} text-xl`}>Summary</h2>
|
||||
<ExpenseSummary />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
24
app/dashboard/guests/page.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
|
||||
import GuestsTable from '@/app/ui/guests/table';
|
||||
import React, { Suspense } from 'react';
|
||||
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
||||
|
||||
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<AffinityGroupsTree />
|
||||
|
||||
<h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<Suspense fallback={<SkeletonTable />}>
|
||||
<GuestsTable />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import SideNav from '@/app/ui/dashboard/sidenav';
|
||||
|
||||
@ -8,7 +8,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
<div className="w-full flex-none md:w-64">
|
||||
<SideNav />
|
||||
</div>
|
||||
<div data-testid="main-container" className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
|
||||
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
5
app/dashboard/page.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
export default function Page() {
|
||||
return <p>Dashboard Page</p>;
|
||||
}
|
13
app/dashboard/tables/page.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
|
||||
export default function Page () {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import '@/app/ui/global.css'
|
||||
|
||||
|
@ -1,5 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
export class Affinities {
|
||||
[key:string]: number;
|
||||
}
|
@ -1,50 +1,106 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { AttendanceSummary } from "./group";
|
||||
import { Guest } from "./guest";
|
||||
|
||||
export interface Entity {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export type TableArrangement = {
|
||||
id: string;
|
||||
number: number;
|
||||
name: string;
|
||||
guests?: Guest[];
|
||||
discomfort?: number;
|
||||
valid?: boolean;
|
||||
}
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
// This file contains type definitions for your data.
|
||||
// It describes the shape of the data, and what data type each property should accept.
|
||||
// For simplicity of teaching, we're manually defining these types.
|
||||
// However, these types are generated automatically if you're using an ORM such as Prisma.
|
||||
export type User = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export type Captcha = {
|
||||
id: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export type StructuredErrors = {
|
||||
[key: string]: string[] | string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
export type GlobalSummary = {
|
||||
expenses: ExpenseSummary;
|
||||
guests: AttendanceSummary
|
||||
export type Customer = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
image_url: string;
|
||||
};
|
||||
|
||||
export type Guest = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
group_name: string;
|
||||
status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
|
||||
}
|
||||
|
||||
export type ExpenseSummary = {
|
||||
projected: ExpensePossibleSummary;
|
||||
confirmed: ExpensePossibleSummary;
|
||||
status: StatusSummary;
|
||||
}
|
||||
export type Group = {
|
||||
id: string;
|
||||
name: string;
|
||||
guest_count: number;
|
||||
icon: string;
|
||||
children: Group[];
|
||||
};
|
||||
|
||||
export type ExpensePossibleSummary = {
|
||||
total: number;
|
||||
guests: number;
|
||||
}
|
||||
export type StatusSummary = {
|
||||
paid: number;
|
||||
}
|
||||
export type Invoice = {
|
||||
id: string;
|
||||
customer_id: string;
|
||||
amount: number;
|
||||
date: string;
|
||||
// In TypeScript, this is called a string union type.
|
||||
// It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
|
||||
status: 'pending' | 'paid';
|
||||
};
|
||||
|
||||
export type Revenue = {
|
||||
month: string;
|
||||
revenue: number;
|
||||
};
|
||||
|
||||
export type LatestInvoice = {
|
||||
id: string;
|
||||
name: string;
|
||||
image_url: string;
|
||||
email: string;
|
||||
amount: string;
|
||||
};
|
||||
|
||||
// The database returns a number for amount, but we later format it to a string with the formatCurrency function
|
||||
export type LatestInvoiceRaw = Omit<LatestInvoice, 'amount'> & {
|
||||
amount: number;
|
||||
};
|
||||
|
||||
export type guestsTable = {
|
||||
id: string;
|
||||
customer_id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
image_url: string;
|
||||
date: string;
|
||||
amount: number;
|
||||
status: 'pending' | 'paid';
|
||||
};
|
||||
|
||||
export type CustomersTableType = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
image_url: string;
|
||||
total_guests: number;
|
||||
total_pending: number;
|
||||
total_paid: number;
|
||||
};
|
||||
|
||||
export type FormattedCustomersTable = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
image_url: string;
|
||||
total_guests: number;
|
||||
total_pending: string;
|
||||
total_paid: string;
|
||||
};
|
||||
|
||||
export type CustomerField = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type InvoiceForm = {
|
||||
id: string;
|
||||
customer_id: string;
|
||||
amount: number;
|
||||
status: 'pending' | 'paid';
|
||||
};
|
||||
|
@ -1,41 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Serializable } from "../api/abstract-api";
|
||||
import { Entity } from "./definitions";
|
||||
|
||||
export const pricingTypes = ['fixed', 'per_person'] as const;
|
||||
export type PricingType = typeof pricingTypes[number];
|
||||
|
||||
export class Expense implements Entity {
|
||||
id?: string;
|
||||
name?: string;
|
||||
amount?: number;
|
||||
pricingType?: PricingType;
|
||||
|
||||
constructor(id?: string, name?: string, amount?: number, pricingType?: PricingType) {
|
||||
this.id = id;
|
||||
this.name = name || '';
|
||||
this.amount = amount || 0;
|
||||
this.pricingType = pricingType || 'fixed';
|
||||
}
|
||||
}
|
||||
|
||||
export class ExpenseSerializer implements Serializable<Expense>{
|
||||
fromJson(data: any): Expense {
|
||||
return new Expense(data.id, data.name, data.amount, data.pricing_type);
|
||||
}
|
||||
|
||||
toJson(expense: Expense): string {
|
||||
return JSON.stringify({
|
||||
expense: {
|
||||
name: expense.name,
|
||||
amount: expense.amount,
|
||||
pricing_type: expense.pricingType
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
return 'expenses';
|
||||
}
|
||||
}
|
@ -1,64 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Entity } from "./definitions";
|
||||
|
||||
export type AttendanceSummary = {
|
||||
considered: number;
|
||||
invited: number;
|
||||
confirmed: number;
|
||||
declined: number;
|
||||
tentative: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export class Group implements Entity {
|
||||
id?: string;
|
||||
name?: string;
|
||||
guest_count?: number;
|
||||
icon?: string;
|
||||
children?: Group[];
|
||||
parentId?: string;
|
||||
color?: string;
|
||||
attendance?: AttendanceSummary
|
||||
|
||||
constructor(id?: string, name?: string, guest_count?: number, icon?: string, children?: Group[], parentId?: string, color?: string, attendance?: AttendanceSummary) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.guest_count = guest_count;
|
||||
this.icon = icon;
|
||||
this.children = children;
|
||||
this.parentId = parentId;
|
||||
this.color = color;
|
||||
this.attendance = attendance;
|
||||
}
|
||||
}
|
||||
|
||||
export class GroupSerializer {
|
||||
fromJson(data: any): Group {
|
||||
return new Group(
|
||||
data.id,
|
||||
data.name,
|
||||
data.guest_count,
|
||||
data.icon,
|
||||
data.children,
|
||||
data.parent_id,
|
||||
data.color,
|
||||
data.attendance
|
||||
);
|
||||
}
|
||||
|
||||
toJson(group: Group): string {
|
||||
return JSON.stringify({
|
||||
group: {
|
||||
name: group.name,
|
||||
color: group.color,
|
||||
icon: group.icon,
|
||||
parent_id: group.parentId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
return 'groups';
|
||||
}
|
||||
}
|
@ -1,41 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Serializable } from "../api/abstract-api";
|
||||
import { Entity } from "./definitions";
|
||||
import { Group } from "./group";
|
||||
|
||||
export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
|
||||
export type GuestStatus = typeof guestStatuses[number];
|
||||
|
||||
export class Guest implements Entity {
|
||||
id?: string;
|
||||
name?: string;
|
||||
color?: string;
|
||||
status?: GuestStatus;
|
||||
children?: Guest[];
|
||||
group?: Group;
|
||||
|
||||
constructor(id?: string, name?: string, color?: string, status?: GuestStatus, children?: Guest[], Group?: Group) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.color = color;
|
||||
this.status = status;
|
||||
this.children = children;
|
||||
this.group = Group;
|
||||
}
|
||||
}
|
||||
|
||||
export class GuestSerializer implements Serializable<Guest> {
|
||||
fromJson(data: any): Guest {
|
||||
return new Guest(data.id, data.name, data.color, data.status, data.children, new Group(data.group?.id, data.group?.name));
|
||||
}
|
||||
|
||||
toJson(guest: Guest): string {
|
||||
return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.group?.id } });
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
return 'guests';
|
||||
}
|
||||
}
|
||||
|
@ -1,28 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Entity } from "./definitions";
|
||||
import { Guest } from "./guest";
|
||||
|
||||
export class Invitation implements Entity {
|
||||
id?: string;
|
||||
guests: Array<Guest>;
|
||||
|
||||
constructor(id?: string, guests: Array<Guest> = []) {
|
||||
this.id = id;
|
||||
this.guests = guests;
|
||||
}
|
||||
}
|
||||
|
||||
export class InvitationSerializer {
|
||||
fromJson(data: any): Invitation {
|
||||
return new Invitation(data.id, (data.guests || []).map((guest: any) => new Guest(guest.id, guest.name, guest.color, guest.status, guest.children)));
|
||||
}
|
||||
|
||||
toJson(invitation: Invitation): string {
|
||||
return JSON.stringify({ invitation: { guest_ids: invitation.guests.map(guest => guest.id) } });
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
return 'invitations';
|
||||
}
|
||||
}
|
149
app/lib/placeholder-data.ts
Normal file
@ -0,0 +1,149 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
// This file contains placeholder data that you'll be replacing with real data in the Data Fetching chapter:
|
||||
// https://nextjs.org/learn/dashboard-app/fetching-data
|
||||
const users = [
|
||||
{
|
||||
id: '410544b2-4001-4271-9855-fec4b6a6442a',
|
||||
name: 'User',
|
||||
email: 'user@nextmail.com',
|
||||
password: '123456',
|
||||
},
|
||||
];
|
||||
|
||||
const customers = [
|
||||
{
|
||||
id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa',
|
||||
name: 'Evil Rabbit',
|
||||
email: 'evil@rabbit.com',
|
||||
image_url: '/customers/evil-rabbit.png',
|
||||
},
|
||||
{
|
||||
id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
|
||||
name: 'Delba de Oliveira',
|
||||
email: 'delba@oliveira.com',
|
||||
image_url: '/customers/delba-de-oliveira.png',
|
||||
},
|
||||
{
|
||||
id: '3958dc9e-742f-4377-85e9-fec4b6a6442a',
|
||||
name: 'Lee Robinson',
|
||||
email: 'lee@robinson.com',
|
||||
image_url: '/customers/lee-robinson.png',
|
||||
},
|
||||
{
|
||||
id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
|
||||
name: 'Michael Novotny',
|
||||
email: 'michael@novotny.com',
|
||||
image_url: '/customers/michael-novotny.png',
|
||||
},
|
||||
{
|
||||
id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
|
||||
name: 'Amy Burns',
|
||||
email: 'amy@burns.com',
|
||||
image_url: '/customers/amy-burns.png',
|
||||
},
|
||||
{
|
||||
id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
|
||||
name: 'Balazs Orban',
|
||||
email: 'balazs@orban.com',
|
||||
image_url: '/customers/balazs-orban.png',
|
||||
},
|
||||
];
|
||||
|
||||
const guests = [
|
||||
{
|
||||
customer_id: customers[0].id,
|
||||
amount: 15795,
|
||||
status: 'pending',
|
||||
date: '2022-12-06',
|
||||
},
|
||||
{
|
||||
customer_id: customers[1].id,
|
||||
amount: 20348,
|
||||
status: 'pending',
|
||||
date: '2022-11-14',
|
||||
},
|
||||
{
|
||||
customer_id: customers[4].id,
|
||||
amount: 3040,
|
||||
status: 'paid',
|
||||
date: '2022-10-29',
|
||||
},
|
||||
{
|
||||
customer_id: customers[3].id,
|
||||
amount: 44800,
|
||||
status: 'paid',
|
||||
date: '2023-09-10',
|
||||
},
|
||||
{
|
||||
customer_id: customers[5].id,
|
||||
amount: 34577,
|
||||
status: 'pending',
|
||||
date: '2023-08-05',
|
||||
},
|
||||
{
|
||||
customer_id: customers[2].id,
|
||||
amount: 54246,
|
||||
status: 'pending',
|
||||
date: '2023-07-16',
|
||||
},
|
||||
{
|
||||
customer_id: customers[0].id,
|
||||
amount: 666,
|
||||
status: 'pending',
|
||||
date: '2023-06-27',
|
||||
},
|
||||
{
|
||||
customer_id: customers[3].id,
|
||||
amount: 32545,
|
||||
status: 'paid',
|
||||
date: '2023-06-09',
|
||||
},
|
||||
{
|
||||
customer_id: customers[4].id,
|
||||
amount: 1250,
|
||||
status: 'paid',
|
||||
date: '2023-06-17',
|
||||
},
|
||||
{
|
||||
customer_id: customers[5].id,
|
||||
amount: 8546,
|
||||
status: 'paid',
|
||||
date: '2023-06-07',
|
||||
},
|
||||
{
|
||||
customer_id: customers[1].id,
|
||||
amount: 500,
|
||||
status: 'paid',
|
||||
date: '2023-08-19',
|
||||
},
|
||||
{
|
||||
customer_id: customers[5].id,
|
||||
amount: 8945,
|
||||
status: 'paid',
|
||||
date: '2023-06-03',
|
||||
},
|
||||
{
|
||||
customer_id: customers[2].id,
|
||||
amount: 1000,
|
||||
status: 'paid',
|
||||
date: '2022-06-05',
|
||||
},
|
||||
];
|
||||
|
||||
const revenue = [
|
||||
{ month: 'Jan', revenue: 2000 },
|
||||
{ month: 'Feb', revenue: 1800 },
|
||||
{ month: 'Mar', revenue: 2200 },
|
||||
{ month: 'Apr', revenue: 2500 },
|
||||
{ month: 'May', revenue: 2300 },
|
||||
{ month: 'Jun', revenue: 3200 },
|
||||
{ month: 'Jul', revenue: 3500 },
|
||||
{ month: 'Aug', revenue: 3700 },
|
||||
{ month: 'Sep', revenue: 2500 },
|
||||
{ month: 'Oct', revenue: 2800 },
|
||||
{ month: 'Nov', revenue: 3000 },
|
||||
{ month: 'Dec', revenue: 4800 },
|
||||
];
|
||||
|
||||
export { users, customers, guests, revenue };
|
@ -1,72 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Serializable } from "../api/abstract-api";
|
||||
import { Entity } from "./definitions";
|
||||
import { Group } from "./group";
|
||||
import { Guest } from "./guest";
|
||||
|
||||
export type Discomfort = {
|
||||
discomfort: number;
|
||||
breakdown: {
|
||||
tableSizePenalty: number;
|
||||
cohesionPenalty: number;
|
||||
}
|
||||
}
|
||||
|
||||
export type Table = {
|
||||
number: number;
|
||||
guests: Guest[];
|
||||
discomfort: Discomfort;
|
||||
}
|
||||
|
||||
export class TableSimulation implements Entity {
|
||||
id?: string;
|
||||
tables: Table[];
|
||||
|
||||
constructor(id?: string, tables?: Table[]) {
|
||||
this.id = id;
|
||||
this.tables = tables || [];
|
||||
}
|
||||
}
|
||||
|
||||
export class TableSimulationSerializer implements Serializable<TableSimulation> {
|
||||
fromJson(data: any): TableSimulation {
|
||||
return new TableSimulation(data.id, data.tables.map((table: any) => {
|
||||
return {
|
||||
number: table.number,
|
||||
guests: table.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.color, guest.status, [], guest.group)),
|
||||
discomfort: {
|
||||
discomfort: table.discomfort.discomfort,
|
||||
breakdown: {
|
||||
tableSizePenalty: table.discomfort.breakdown.table_size_penalty,
|
||||
cohesionPenalty: table.discomfort.breakdown.cohesion_penalty,
|
||||
}
|
||||
},
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
toJson(simulation: TableSimulation): string {
|
||||
return JSON.stringify({ simulation: { tables: simulation.tables.map((table) => {
|
||||
return {
|
||||
number: table.number,
|
||||
guests: table.guests.map((guest) => {
|
||||
return {
|
||||
id: guest.id,
|
||||
name: guest.name,
|
||||
color: guest.color,
|
||||
status: guest.status,
|
||||
children: guest.children,
|
||||
group: new Group(guest.group?.id, guest.group?.name)
|
||||
}
|
||||
}),
|
||||
discomfort: table.discomfort,
|
||||
}
|
||||
}) } });
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
return 'tables_arrangements';
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,13 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { Revenue } from './definitions';
|
||||
|
||||
export const formatCurrency = (amount: number) => {
|
||||
return (amount / 100).toLocaleString('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
});
|
||||
};
|
||||
|
||||
export const getCsrfToken = () => {
|
||||
return document.cookie
|
||||
@ -7,14 +16,63 @@ export const getCsrfToken = () => {
|
||||
?.split("=")[1] || 'unknown';
|
||||
}
|
||||
|
||||
export const getSlug = () => localStorage.getItem('slug') || 'default';
|
||||
export const formatDateToLocal = (
|
||||
dateStr: string,
|
||||
locale: string = 'en-US',
|
||||
) => {
|
||||
const date = new Date(dateStr);
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
};
|
||||
const formatter = new Intl.DateTimeFormat(locale, options);
|
||||
return formatter.format(date);
|
||||
};
|
||||
|
||||
// From https://stackoverflow.com/a/1026087/3607039
|
||||
export const capitalize = (val:string) => {
|
||||
return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
||||
}
|
||||
export const generateYAxis = (revenue: Revenue[]) => {
|
||||
// Calculate what labels we need to display on the y-axis
|
||||
// based on highest record and in 1000s
|
||||
const yAxisLabels = [];
|
||||
const highestRecord = Math.max(...revenue.map((month) => month.revenue));
|
||||
const topLabel = Math.ceil(highestRecord / 1000) * 1000;
|
||||
|
||||
// From https://stackoverflow.com/a/62118163/3607039
|
||||
export function asArray<T>(value: T | T[]): T[] {
|
||||
return ([] as T[]).concat(value)
|
||||
}
|
||||
for (let i = topLabel; i >= 0; i -= 1000) {
|
||||
yAxisLabels.push(`$${i / 1000}K`);
|
||||
}
|
||||
|
||||
return { yAxisLabels, topLabel };
|
||||
};
|
||||
|
||||
export const generatePagination = (currentPage: number, totalPages: number) => {
|
||||
// If the total number of pages is 7 or less,
|
||||
// display all pages without any ellipsis.
|
||||
if (totalPages <= 7) {
|
||||
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
||||
}
|
||||
|
||||
// If the current page is among the first 3 pages,
|
||||
// show the first 3, an ellipsis, and the last 2 pages.
|
||||
if (currentPage <= 3) {
|
||||
return [1, 2, 3, '...', totalPages - 1, totalPages];
|
||||
}
|
||||
|
||||
// If the current page is among the last 3 pages,
|
||||
// show the first 2, an ellipsis, and the last 3 pages.
|
||||
if (currentPage >= totalPages - 2) {
|
||||
return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages];
|
||||
}
|
||||
|
||||
// If the current page is somewhere in the middle,
|
||||
// show the first page, an ellipsis, the current page and its neighbors,
|
||||
// another ellipsis, and the last page.
|
||||
return [
|
||||
1,
|
||||
'...',
|
||||
currentPage - 1,
|
||||
currentPage,
|
||||
currentPage + 1,
|
||||
'...',
|
||||
totalPages,
|
||||
];
|
||||
};
|
||||
|
@ -1,30 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Serializable } from "../api/abstract-api";
|
||||
import { Entity } from "./definitions";
|
||||
|
||||
|
||||
export class Website implements Entity {
|
||||
id?: string;
|
||||
content?: string;
|
||||
|
||||
constructor(id: string, content: string) {
|
||||
this.id = id;
|
||||
this.content = content;
|
||||
}
|
||||
}
|
||||
|
||||
export class WebsiteSerializer implements Serializable<Website> {
|
||||
fromJson(data: any): Website {
|
||||
return new Website("", data.content);
|
||||
}
|
||||
|
||||
toJson(website: Website): string {
|
||||
return JSON.stringify({ website: { content: website.content } });
|
||||
}
|
||||
|
||||
apiPath(): string {
|
||||
return 'website';
|
||||
}
|
||||
}
|
||||
|
12
app/page.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import styles from '@/app/ui/home.module.css';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col p-6">
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
124
app/seed/route.ts
Normal file
@ -0,0 +1,124 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
// import bcrypt from 'bcrypt';
|
||||
// import { db } from '@vercel/postgres';
|
||||
// import { guests, customers, revenue, users } from '../lib/placeholder-data';
|
||||
|
||||
// const client = await db.connect();
|
||||
|
||||
// async function seedUsers() {
|
||||
// await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
|
||||
// await client.sql`
|
||||
// CREATE TABLE IF NOT EXISTS users (
|
||||
// id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
|
||||
// name VARCHAR(255) NOT NULL,
|
||||
// email TEXT NOT NULL UNIQUE,
|
||||
// password TEXT NOT NULL
|
||||
// );
|
||||
// `;
|
||||
|
||||
// const insertedUsers = await Promise.all(
|
||||
// users.map(async (user) => {
|
||||
// const hashedPassword = await bcrypt.hash(user.password, 10);
|
||||
// return client.sql`
|
||||
// INSERT INTO users (id, name, email, password)
|
||||
// VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
|
||||
// ON CONFLICT (id) DO NOTHING;
|
||||
// `;
|
||||
// }),
|
||||
// );
|
||||
|
||||
// return insertedUsers;
|
||||
// }
|
||||
|
||||
// async function seedguests() {
|
||||
// await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
|
||||
|
||||
// await client.sql`
|
||||
// CREATE TABLE IF NOT EXISTS guests (
|
||||
// id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
|
||||
// customer_id UUID NOT NULL,
|
||||
// amount INT NOT NULL,
|
||||
// status VARCHAR(255) NOT NULL,
|
||||
// date DATE NOT NULL
|
||||
// );
|
||||
// `;
|
||||
|
||||
// const insertedguests = await Promise.all(
|
||||
// guests.map(
|
||||
// (invoice) => client.sql`
|
||||
// INSERT INTO guests (customer_id, amount, status, date)
|
||||
// VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
|
||||
// ON CONFLICT (id) DO NOTHING;
|
||||
// `,
|
||||
// ),
|
||||
// );
|
||||
|
||||
// return insertedguests;
|
||||
// }
|
||||
|
||||
// async function seedCustomers() {
|
||||
// await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
|
||||
|
||||
// await client.sql`
|
||||
// CREATE TABLE IF NOT EXISTS customers (
|
||||
// id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
|
||||
// name VARCHAR(255) NOT NULL,
|
||||
// email VARCHAR(255) NOT NULL,
|
||||
// image_url VARCHAR(255) NOT NULL
|
||||
// );
|
||||
// `;
|
||||
|
||||
// const insertedCustomers = await Promise.all(
|
||||
// customers.map(
|
||||
// (customer) => client.sql`
|
||||
// INSERT INTO customers (id, name, email, image_url)
|
||||
// VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url})
|
||||
// ON CONFLICT (id) DO NOTHING;
|
||||
// `,
|
||||
// ),
|
||||
// );
|
||||
|
||||
// return insertedCustomers;
|
||||
// }
|
||||
|
||||
// async function seedRevenue() {
|
||||
// await client.sql`
|
||||
// CREATE TABLE IF NOT EXISTS revenue (
|
||||
// month VARCHAR(4) NOT NULL UNIQUE,
|
||||
// revenue INT NOT NULL
|
||||
// );
|
||||
// `;
|
||||
|
||||
// const insertedRevenue = await Promise.all(
|
||||
// revenue.map(
|
||||
// (rev) => client.sql`
|
||||
// INSERT INTO revenue (month, revenue)
|
||||
// VALUES (${rev.month}, ${rev.revenue})
|
||||
// ON CONFLICT (month) DO NOTHING;
|
||||
// `,
|
||||
// ),
|
||||
// );
|
||||
|
||||
// return insertedRevenue;
|
||||
// }
|
||||
|
||||
export async function GET() {
|
||||
return Response.json({
|
||||
message:
|
||||
'Uncomment this file and remove this line. You can delete this file when you are finished.',
|
||||
});
|
||||
// try {
|
||||
// await client.sql`BEGIN`;
|
||||
// await seedUsers();
|
||||
// await seedCustomers();
|
||||
// await seedguests();
|
||||
// await seedRevenue();
|
||||
// await client.sql`COMMIT`;
|
||||
|
||||
// return Response.json({ message: 'Database seeded successfully' });
|
||||
// } catch (error) {
|
||||
// await client.sql`ROLLBACK`;
|
||||
// return Response.json({ error }, { status: 500 });
|
||||
// }
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import * as HeroIcon from '@heroicons/react/24/outline'
|
||||
import { ComponentProps } from 'react'
|
||||
|
@ -1,37 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { TableArrangement } from '@/app/lib/definitions';
|
||||
import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
|
||||
import { Table } from '@/app/ui/components/table';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function Arrangement({ id }: { id: string }) {
|
||||
|
||||
const [simulation, setSimulation] = useState<TableSimulation | undefined>(undefined);
|
||||
|
||||
function loadSimulation() {
|
||||
new AbstractApi<TableSimulation>().get(new TableSimulationSerializer(), id, (object: TableSimulation) => {
|
||||
setSimulation(object);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(loadSimulation, []);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="w-full items-center justify-between">
|
||||
<h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
|
||||
<div className="flex flex-row flex-wrap justify-around">
|
||||
{simulation && simulation.tables.map((table) => (
|
||||
<Table key={table.number} table={table} style="rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
@ -1,63 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react"
|
||||
import { TableArrangement } from '@/app/lib/definitions';
|
||||
import { classNames } from "../components/button";
|
||||
import TableOfContents from "../components/table-of-contents";
|
||||
import { loadTableSimulations } from "@/app/api/tableSimulations";
|
||||
import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
|
||||
import { Tooltip } from "primereact/tooltip";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
|
||||
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
||||
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
|
||||
|
||||
function refreshSimulations() {
|
||||
loadTableSimulations((arrangements) => {
|
||||
setArrangements(arrangements);
|
||||
setArrangementsLoaded(true);
|
||||
});
|
||||
}
|
||||
|
||||
function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
|
||||
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
|
||||
}
|
||||
|
||||
!arrangementsLoaded && refreshSimulations();
|
||||
|
||||
return (
|
||||
<TableOfContents
|
||||
headers={['Name', 'Discomfort', 'Actions', 'Status']}
|
||||
caption='Simulations'
|
||||
elements={arrangements}
|
||||
rowRender={(arrangement) => (
|
||||
<tr key={arrangement.id} className={clsx("border-b", {
|
||||
"bg-white odd:bg-white even:bg-gray-50": arrangement.valid,
|
||||
"bg-red-50 odd:bg-red-50 even:bg-red-100": !arrangement.valid
|
||||
})}>
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
{arrangement.name}
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
{arrangement.discomfort}
|
||||
</td>
|
||||
<td>
|
||||
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
||||
</td>
|
||||
<td>
|
||||
<Tooltip target=".tooltip-status" />
|
||||
|
||||
{
|
||||
arrangement.valid ?
|
||||
<CheckBadgeIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is valid" /> :
|
||||
<ArchiveBoxXMarkIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is expired due to attendance or affinity changes" />
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import clsx from 'clsx';
|
||||
|
||||
|
@ -1,82 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { Affinities } from '@/app/lib/affinities';
|
||||
import { Group } from '@/app/lib/group';
|
||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { useEffect, useState } from 'react';
|
||||
import AffinitySlider from './form/affinitySlider';
|
||||
|
||||
export default function AffinitiesFormDialog({ groups, group, visible, onHide }: {
|
||||
groups: Group[],
|
||||
group?: Group,
|
||||
visible: boolean,
|
||||
onHide: () => void,
|
||||
}) {
|
||||
const [affinities, setAffinities] = useState<Affinities>({});
|
||||
const [isLoadingAffinities, setIsLoadingAffinities] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoadingAffinities(true);
|
||||
if (group?.id === undefined) {
|
||||
setAffinities({});
|
||||
setIsLoadingAffinities(false)
|
||||
} else {
|
||||
fetch(`/api/${getSlug()}/groups/${group?.id}/affinities`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setAffinities(data);
|
||||
setIsLoadingAffinities(false)
|
||||
});
|
||||
}
|
||||
}, [group]);
|
||||
|
||||
function submitAffinities() {
|
||||
const formattedAffinities = Object.entries(affinities).map(([groupId, affinity]) => ({ group_id: groupId, affinity: affinity }));
|
||||
fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/bulk_update`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
},
|
||||
body: JSON.stringify({ affinities: formattedAffinities })
|
||||
}).then(() => {
|
||||
onHide();
|
||||
});
|
||||
}
|
||||
|
||||
function resetAffinities() {
|
||||
fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/default`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
}).then((response) => response.json())
|
||||
.then(setAffinities);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog header="Update affinities" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
||||
{!isLoadingAffinities && <div className="card justify-evenly py-5 bg-gray-200 flex flex-col">
|
||||
<span className="text-center p-4">Describe the affinity with the rest of the groups</span>
|
||||
|
||||
{
|
||||
groups.filter((currentGroup) => currentGroup.id !== group?.id).map((group) =>
|
||||
<div key={group.id} className="flex flex-row hover:bg-gray-300 px-3 py-2 items-center">
|
||||
<span className="w-1/3 text-right px-4">{group.name}</span>
|
||||
<AffinitySlider value={group.id && affinities[group.id] || 1} onChange={(value) => setAffinities({ ...affinities, [group.id || "default"]: value })} />
|
||||
</div>)
|
||||
}
|
||||
|
||||
<div className="flex justify-center">
|
||||
<button className={classNames('gray')} onClick={resetAffinities} >Reset</button>
|
||||
<button className={classNames('primary')} onClick={submitAffinities} >Update</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</Dialog>
|
||||
);
|
||||
}
|
@ -1,15 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import clsx from "clsx";
|
||||
|
||||
type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
|
||||
|
||||
export function classNames(type: ButtonColor) {
|
||||
return (clsx("text-white py-1 px-2 m-2 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
|
||||
'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
|
||||
'bg-green-500 hover:bg-green-600': type === 'green',
|
||||
'bg-red-500 hover:bg-red-600': type === 'red',
|
||||
'bg-yellow-500 hover:bg-yellow-700': type === 'yellow',
|
||||
'bg-gray-500 hover:bg-gray-700': type === 'gray'
|
||||
}))
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import clsx from "clsx"
|
||||
import { Icon } from "../../types";
|
||||
@ -21,7 +21,7 @@ const colorClasses = (style: Style) => {
|
||||
}
|
||||
}
|
||||
|
||||
export function MainCard({ amount, title, subtitle, style, iconName }:
|
||||
export async function MainCard({ amount, title, subtitle, style, iconName }:
|
||||
{
|
||||
amount: string,
|
||||
title: string,
|
||||
@ -42,7 +42,7 @@ export function MainCard({ amount, title, subtitle, style, iconName }:
|
||||
);
|
||||
}
|
||||
|
||||
export function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
|
||||
export async function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
|
||||
return (
|
||||
<div className={`h-12 w-80 m-1 p-2 text-white flex flex-row items-center ${colorClasses(style)}`}>
|
||||
<Icon className="m-3 h-7 w-7" name={iconName} />
|
||||
|
@ -1,83 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Expense, ExpenseSerializer, PricingType, pricingTypes } from '@/app/lib/expense';
|
||||
import { capitalize } from '@/app/lib/utils';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { FloatLabel } from 'primereact/floatlabel';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function ExpenseFormDialog({ onCreate, onHide, expense, visible }: {
|
||||
onCreate?: () => void,
|
||||
onHide: () => void,
|
||||
expense?: Expense,
|
||||
visible: boolean,
|
||||
}) {
|
||||
|
||||
const [name, setName] = useState<string>(expense?.name || '');
|
||||
const [amount, setAmount] = useState<number>(expense?.amount || 0);
|
||||
const [pricingType, setPricingType] = useState<PricingType>(expense?.pricingType || 'fixed');
|
||||
|
||||
const api = new AbstractApi<Expense>();
|
||||
const serializer = new ExpenseSerializer();
|
||||
|
||||
function resetForm() {
|
||||
setName('');
|
||||
setAmount(0);
|
||||
setPricingType('fixed');
|
||||
}
|
||||
|
||||
function submitGroup() {
|
||||
if (expense?.id !== undefined) {
|
||||
expense.name = name;
|
||||
expense.amount = amount;
|
||||
expense.pricingType = pricingType;
|
||||
|
||||
api.update(serializer, expense, () => {
|
||||
resetForm();
|
||||
onCreate && onCreate();
|
||||
});
|
||||
} else {
|
||||
|
||||
api.create(serializer, new Expense(undefined, name, amount, pricingType), () => {
|
||||
resetForm();
|
||||
onCreate && onCreate();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Dialog header="Add/edit expense" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
||||
<div className="card flex justify-evenly py-5">
|
||||
<FloatLabel>
|
||||
<InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<label htmlFor="name">Name</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<InputText id="amount" className='rounded-sm' value={amount.toString()} onChange={(e) => setAmount(parseFloat(e.target.value))} />
|
||||
<label htmlFor="amount">Amount</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<Dropdown id="pricingType" className='rounded-sm min-w-32' value={pricingType} onChange={(e) => setPricingType(e.target.value)} options={
|
||||
pricingTypes.map((type) => {
|
||||
return { label: capitalize(type), value: type };
|
||||
})
|
||||
} />
|
||||
<label htmlFor="pricingType">Pricing type</label>
|
||||
</FloatLabel>
|
||||
|
||||
<button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
|
||||
{expense?.id !== undefined ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,40 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Slider } from 'primereact/slider';
|
||||
|
||||
export default function AffinitySlider({ value, onChange }: { value: number, onChange: (value: number) => void }) {
|
||||
|
||||
const toNumber = (value : number | [number, number]) => {
|
||||
if(value instanceof Array) {
|
||||
return value[0];
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
const label = (value: number) => {
|
||||
if (value < 0.2) {
|
||||
return 'Nemesis';
|
||||
} else if (value < 0.5) {
|
||||
return 'Enemies';
|
||||
} else if (value < 0.9) {
|
||||
return 'Bad vibes';
|
||||
} else if (value < 1.1) {
|
||||
return 'Neutral';
|
||||
} else if (value < 1.5) {
|
||||
return 'Good vibes';
|
||||
} else if (value < 1.8) {
|
||||
return 'Good friends';
|
||||
} else {
|
||||
return 'Besties';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider value={value} min={0} max={2} step={.1} onChange={(e) => onChange(toNumber(e.value))} className='w-80 bg-gray-400' />
|
||||
<span className="px-4 w-1/5">
|
||||
{label(value)}
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
}
|
@ -1,34 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function InlineTextField({ initialValue, onChange }: { initialValue: string, onChange: (value: string) => void }) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [value, setValue] = useState(initialValue);
|
||||
|
||||
const renderText = () => <span onClick={() => setEditing(true)}>{value}</span>
|
||||
|
||||
const onConfirm = () => {
|
||||
onChange(value);
|
||||
setEditing(false);
|
||||
}
|
||||
|
||||
function renderForm() {
|
||||
return (
|
||||
<div className="flex flex-row">
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
className="px-2 py-0 h-5 max-w-48"
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onBlur={onConfirm}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
editing ? (renderForm()) : (renderText())
|
||||
);
|
||||
}
|
@ -1,95 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Group, GroupSerializer } from '@/app/lib/group';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import { ColorPicker } from 'primereact/colorpicker';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { FloatLabel } from 'primereact/floatlabel';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function GroupFormDialog({ groups, onCreate, onHide, group, visible }: {
|
||||
groups: Group[],
|
||||
onCreate?: (newGroup: Group) => void,
|
||||
onHide: () => void,
|
||||
group?: Group,
|
||||
visible: boolean,
|
||||
}) {
|
||||
|
||||
const [name, setName] = useState(group?.name || '');
|
||||
const [icon, setIcon] = useState(group?.icon || '');
|
||||
const [color, setColor] = useState<string>(group?.color || '');
|
||||
const [parentId, setParentId] = useState(group?.parentId || '');
|
||||
|
||||
const api = new AbstractApi<Group>();
|
||||
const serializer = new GroupSerializer();
|
||||
|
||||
function resetForm() {
|
||||
setName('');
|
||||
setIcon('');
|
||||
setColor('');
|
||||
setParentId('');
|
||||
}
|
||||
|
||||
function submitGroup() {
|
||||
if (!(name)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (group?.id !== undefined) {
|
||||
group.name = name;
|
||||
group.icon = icon;
|
||||
group.color = color;
|
||||
group.parentId = parentId;
|
||||
|
||||
api.update(serializer, group, (newGroup) => {
|
||||
resetForm();
|
||||
onCreate && onCreate(newGroup);
|
||||
});
|
||||
} else {
|
||||
|
||||
api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), (newGroup) => {
|
||||
resetForm();
|
||||
onCreate && onCreate(newGroup);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Dialog header="Add group" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
||||
<div className="card flex justify-evenly py-5">
|
||||
<FloatLabel>
|
||||
<InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<label htmlFor="name">Name</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<InputText id="icon" className='rounded-sm' value={icon} onChange={(e) => setIcon(e.target.value)} />
|
||||
<label htmlFor="icon">Icon</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<ColorPicker value={color} format='hex' onChange={(e) => setColor(`#${e.value}`)} />
|
||||
<label htmlFor="color" />
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<Dropdown id="parentId" className='rounded-sm min-w-32' value={parentId} onChange={(e) => setParentId(e.target.value)} options={
|
||||
groups.map((group) => {
|
||||
return { label: group.name, value: group.id };
|
||||
})
|
||||
} />
|
||||
<label htmlFor="parentId">Parent</label>
|
||||
</FloatLabel>
|
||||
|
||||
<button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
|
||||
{group?.id !== undefined ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,91 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Group } from '@/app/lib/group';
|
||||
import { Guest, GuestSerializer, GuestStatus, guestStatuses } from '@/app/lib/guest';
|
||||
import { capitalize } from '@/app/lib/utils';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { FloatLabel } from 'primereact/floatlabel';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible }: {
|
||||
groups: Group[],
|
||||
onCreate?: (guest: Guest) => void,
|
||||
onHide: () => void,
|
||||
guest?: Guest,
|
||||
visible: boolean,
|
||||
}) {
|
||||
|
||||
const [name, setName] = useState(guest?.name || '');
|
||||
const [group, setGroup] = useState(guest?.group?.id || null);
|
||||
const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
|
||||
|
||||
const api = new AbstractApi<Guest>();
|
||||
const serializer = new GuestSerializer();
|
||||
|
||||
function resetForm() {
|
||||
setName('');
|
||||
setGroup(null);
|
||||
setStatus(null);
|
||||
}
|
||||
|
||||
function submitGuest() {
|
||||
if (!(name && group && status)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (guest?.id !== undefined) {
|
||||
guest.name = name;
|
||||
guest.group!.id = group;
|
||||
guest.status = status;
|
||||
|
||||
api.update(serializer, guest, (updatedGuest) => {
|
||||
resetForm();
|
||||
onCreate && onCreate(updatedGuest);
|
||||
});
|
||||
} else {
|
||||
api.create(serializer, new Guest(undefined, name, undefined, status, [], groups.find((g) => g.id === group)), (newGuest)=> {
|
||||
resetForm();
|
||||
onCreate && onCreate(newGuest);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Dialog header="Add guest" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
||||
<div className="card flex justify-evenly py-5">
|
||||
<FloatLabel>
|
||||
<InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<label htmlFor="name">Name</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={
|
||||
groups.map((group) => {
|
||||
return { label: group.name, value: group.id };
|
||||
})
|
||||
} />
|
||||
<label htmlFor="group">Group</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<Dropdown id="status" className='rounded-sm min-w-32' value={status} onChange={(e) => setStatus(e.target.value)} options={
|
||||
guestStatuses.map((status) => {
|
||||
return { label: capitalize(status), value: status };
|
||||
})
|
||||
} />
|
||||
<label htmlFor="status">Status</label>
|
||||
</FloatLabel>
|
||||
<button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group && status)}>
|
||||
{guest?.id !== undefined ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,54 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { FloatLabel } from 'primereact/floatlabel';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { login } from '../../api/authentication';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { classNames } from './button';
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { User } from '../../lib/definitions';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
|
||||
export default function LoginForm() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => {setSlug(getSlug())}, []);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('currentUser', JSON.stringify(currentUser));
|
||||
}, [currentUser]);
|
||||
|
||||
return (
|
||||
<div className="card flex justify-evenly py-5">
|
||||
<FloatLabel>
|
||||
<InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
|
||||
<label htmlFor="email">Email</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel>
|
||||
<InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
|
||||
<label htmlFor="password">Password</label>
|
||||
</FloatLabel>
|
||||
<button
|
||||
className={classNames('primary')}
|
||||
disabled={email.length == 0 || password.length == 0}
|
||||
onClick={() => login({
|
||||
email: email,
|
||||
password: password,
|
||||
onLogin: (user) => {
|
||||
setCurrentUser(user);
|
||||
router.push(`${slug}/dashboard`)
|
||||
}
|
||||
})}>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,100 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { FloatLabel } from 'primereact/floatlabel';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { classNames } from './button';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import { register } from '@/app/api/authentication';
|
||||
import { getCaptchaChallenge } from '@/app/api/captcha';
|
||||
|
||||
export default function RegistrationForm() {
|
||||
const [submitted, setSubmitted] = useState<boolean>(false);
|
||||
const [errors, setErrors] = useState<string[]>([]);
|
||||
|
||||
const [email, setEmail] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => { setSlug(getSlug()) }, []);
|
||||
|
||||
const [captchaId, setCaptchaId] = useState<string>("");
|
||||
const [captchaUrl, setCaptchaUrl] = useState<string>("");
|
||||
const [captchaAnswer, setCaptchaAnswer] = useState<string>("");
|
||||
|
||||
const refreshCaptcha = () => {
|
||||
getCaptchaChallenge({
|
||||
onRetrieve: (id, url) => {
|
||||
console.log(id, url);
|
||||
setCaptchaId(id);
|
||||
setCaptchaUrl(url);
|
||||
setCaptchaAnswer("");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(refreshCaptcha, [])
|
||||
|
||||
return (
|
||||
submitted ? (
|
||||
<div className="card flex justify-evenly py-5 flex-col">
|
||||
<div className="text-green-500">Registration successful. Check your email for a confirmation link.</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
<div className="card flex justify-evenly py-5 flex-col">
|
||||
<FloatLabel className="my-4">
|
||||
<InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
|
||||
<label htmlFor="email">Email</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel className="my-4">
|
||||
<InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
|
||||
<label htmlFor="password">Password</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel className="my-4">
|
||||
<InputText id="passwordConfirmation" type="password" className='rounded-sm' onChange={(e) => setPasswordConfirmation(e.target.value)} />
|
||||
<label htmlFor="passwordConfirmation">Confirm Password</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel className="my-4">
|
||||
<InputText id="slug" type="text" className='rounded-sm' onChange={(e) => setSlug(e.target.value)} />
|
||||
<label htmlFor="slug">Slug</label>
|
||||
</FloatLabel>
|
||||
<img className="w-96" src={captchaUrl} alt="captcha" />
|
||||
<FloatLabel className="my-4">
|
||||
<InputText id="captcha" type="text" className='rounded-sm' value={captchaAnswer} onChange={(e) => setCaptchaAnswer(e.target.value)} />
|
||||
<label htmlFor="captcha">Captcha</label>
|
||||
</FloatLabel>
|
||||
|
||||
{errors.map((error, index) => (
|
||||
<div key={index} className="text-red-500">{error}</div>
|
||||
))}
|
||||
|
||||
|
||||
<button
|
||||
className={classNames('primary')}
|
||||
disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)}
|
||||
onClick={() => register(
|
||||
{
|
||||
slug: slug,
|
||||
email: email,
|
||||
password: password,
|
||||
passwordConfirmation: passwordConfirmation,
|
||||
captcha: {
|
||||
id: captchaId,
|
||||
answer: captchaAnswer
|
||||
},
|
||||
onRegister: () => { setErrors([]); setSubmitted(true) },
|
||||
onError: (errors) => { refreshCaptcha(); setErrors(errors) }
|
||||
}
|
||||
)}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
);
|
||||
}
|
@ -1,28 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
|
||||
return (
|
||||
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
|
||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
|
||||
{caption}
|
||||
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||
There are {elements.length} elements in the list
|
||||
</p>
|
||||
</caption>
|
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
{headers.map((header) => (
|
||||
<th scope="col" className="px-6 py-3">
|
||||
{header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{elements.map((element) => rowRender(element))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,107 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { Guest } from "@/app/lib/guest";
|
||||
import { Table as TableType } from "@/app/lib/tableSimulation";
|
||||
import { RectangleGroupIcon, UserGroupIcon } from "@heroicons/react/24/outline";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { Tooltip } from "primereact/tooltip";
|
||||
import clsx from "clsx";
|
||||
|
||||
|
||||
function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
|
||||
rotation = rotation || 0
|
||||
return (
|
||||
<div className={`m-3 w-24 h-24 rounded-full content-center text-center cursor-default`} style={{
|
||||
rotate: `${360 - rotation}deg`,
|
||||
backgroundColor: guest.color,
|
||||
}}>
|
||||
{guest.name}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GuestRow({ guests }: { guests: Guest[] }) {
|
||||
return (
|
||||
<div className="justify-around flex flex-row">
|
||||
{guests.map((guest) => <Dish key={guest.id} guest={guest} />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RectangularTable({ table }: { table: TableType }) {
|
||||
const guests = table.guests;
|
||||
const halfwayThrough = Math.floor(guests.length / 2)
|
||||
const arrayFirstHalf = guests.slice(0, halfwayThrough);
|
||||
const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
|
||||
|
||||
return (
|
||||
<div className="m-12 h-64 bg-cyan-800 flex flex-col justify-between">
|
||||
<GuestRow guests={arrayFirstHalf} />
|
||||
<GuestRow guests={arraySecondHalf} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RoundedTable({ table }: { table: TableType }) {
|
||||
const guests = table.guests;
|
||||
const size = 500
|
||||
const rotation = 360 / guests.length
|
||||
|
||||
const className = (penalty: number) => {
|
||||
return clsx("px-2 tooltip-cohesion", {
|
||||
"hidden": penalty === 0,
|
||||
"text-orange-300": penalty <= 5,
|
||||
"text-orange-500": penalty > 5 && penalty <= 10,
|
||||
"text-orange-700": penalty > 10,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className={`m-12 rounded-full bg-cyan-800 relative z-0 grid flex items-center justify-items-center`} style={{ width: `${size}px`, height: `${size}px` }}>
|
||||
|
||||
{
|
||||
guests.map((guest, index) => {
|
||||
return (
|
||||
<div key={guest.id} className={`border-dashed grid justify-items-center absolute inset-0`} style={{
|
||||
rotate: `${index * rotation}deg`,
|
||||
height: `${size}px`,
|
||||
width: `${size}px`,
|
||||
}}>
|
||||
<Dish guest={guest} rotation={index * rotation} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
<div className="bg-zinc-200 w-48 h-12 p-3 flex flex-row rounded z-10">
|
||||
<div className="px-2 text-slate-800">{`Table #${table.number}`}</div>
|
||||
|
||||
|
||||
<Tooltip target=".tooltip-cohesion" />
|
||||
<Tooltip target=".tooltip-size" />
|
||||
|
||||
<RectangleGroupIcon
|
||||
className={className(table.discomfort.breakdown.cohesionPenalty)}
|
||||
data-pr-tooltip={`Cohesion penalty: ${Math.round(table.discomfort.breakdown.cohesionPenalty)}`}
|
||||
data-pr-position="top"
|
||||
/>
|
||||
|
||||
<UserGroupIcon
|
||||
className={className(table.discomfort.breakdown.tableSizePenalty)}
|
||||
data-pr-tooltip={`Table size penalty: ${Math.round(table.discomfort.breakdown.tableSizePenalty)}`}
|
||||
data-pr-position="top"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Table({ table, style }: { table: TableType, style: "rectangular" | "rounded" }) {
|
||||
return (
|
||||
<>
|
||||
{style === "rectangular" && <RectangularTable table={table} />}
|
||||
{style === "rounded" && <RoundedTable table={table} />}
|
||||
</>
|
||||
)
|
||||
}
|
125
app/ui/customers/table.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import Image from 'next/image';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import Search from '@/app/ui/search';
|
||||
import {
|
||||
CustomersTableType,
|
||||
FormattedCustomersTable,
|
||||
} from '@/app/lib/definitions';
|
||||
|
||||
export default async function CustomersTable({
|
||||
customers,
|
||||
}: {
|
||||
customers: FormattedCustomersTable[];
|
||||
}) {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h1 className={`${lusitana.className} mb-8 text-xl md:text-2xl`}>
|
||||
Customers
|
||||
</h1>
|
||||
<Search placeholder="Search customers..." />
|
||||
<div className="mt-6 flow-root">
|
||||
<div className="overflow-x-auto">
|
||||
<div className="inline-block min-w-full align-middle">
|
||||
<div className="overflow-hidden rounded-md bg-gray-50 p-2 md:pt-0">
|
||||
<div className="md:hidden">
|
||||
{customers?.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="mb-2 w-full rounded-md bg-white p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between border-b pb-4">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<Image
|
||||
src={customer.image_url}
|
||||
className="rounded-full"
|
||||
alt={`${customer.name}'s profile picture`}
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
<p>{customer.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">
|
||||
{customer.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between border-b py-5">
|
||||
<div className="flex w-1/2 flex-col">
|
||||
<p className="text-xs">Pending</p>
|
||||
<p className="font-medium">{customer.total_pending}</p>
|
||||
</div>
|
||||
<div className="flex w-1/2 flex-col">
|
||||
<p className="text-xs">Paid</p>
|
||||
<p className="font-medium">{customer.total_paid}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 text-sm">
|
||||
<p>{customer.total_guests} guests</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<table className="hidden min-w-full rounded-md text-gray-900 md:table">
|
||||
<thead className="rounded-md bg-gray-50 text-left text-sm font-normal">
|
||||
<tr>
|
||||
<th scope="col" className="px-4 py-5 font-medium sm:pl-6">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-5 font-medium">
|
||||
Email
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-5 font-medium">
|
||||
Total guests
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-5 font-medium">
|
||||
Total Pending
|
||||
</th>
|
||||
<th scope="col" className="px-4 py-5 font-medium">
|
||||
Total Paid
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody className="divide-y divide-gray-200 text-gray-900">
|
||||
{customers.map((customer) => (
|
||||
<tr key={customer.id} className="group">
|
||||
<td className="whitespace-nowrap bg-white py-5 pl-4 pr-3 text-sm text-black group-first-of-type:rounded-md group-last-of-type:rounded-md sm:pl-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Image
|
||||
src={customer.image_url}
|
||||
className="rounded-full"
|
||||
alt={`${customer.name}'s profile picture`}
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
<p>{customer.name}</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
|
||||
{customer.email}
|
||||
</td>
|
||||
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
|
||||
{customer.total_guests}
|
||||
</td>
|
||||
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
|
||||
{customer.total_pending}
|
||||
</td>
|
||||
<td className="whitespace-nowrap bg-white px-4 py-5 text-sm group-first-of-type:rounded-md group-last-of-type:rounded-md">
|
||||
{customer.total_paid}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
60
app/ui/dashboard/cards.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import {
|
||||
BanknotesIcon,
|
||||
ClockIcon,
|
||||
UserGroupIcon,
|
||||
InboxIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
|
||||
const iconMap = {
|
||||
collected: BanknotesIcon,
|
||||
customers: UserGroupIcon,
|
||||
pending: ClockIcon,
|
||||
guests: InboxIcon,
|
||||
};
|
||||
|
||||
export default async function CardWrapper() {
|
||||
return (
|
||||
<>
|
||||
{/* NOTE: Uncomment this code in Chapter 9 */}
|
||||
|
||||
{/* <Card title="Collected" value={totalPaidguests} type="collected" />
|
||||
<Card title="Pending" value={totalPendingguests} type="pending" />
|
||||
<Card title="Total guests" value={numberOfguests} type="guests" />
|
||||
<Card
|
||||
title="Total Customers"
|
||||
value={numberOfCustomers}
|
||||
type="customers"
|
||||
/> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Card({
|
||||
title,
|
||||
value,
|
||||
type,
|
||||
}: {
|
||||
title: string;
|
||||
value: number | string;
|
||||
type: 'guests' | 'customers' | 'pending' | 'collected';
|
||||
}) {
|
||||
const Icon = iconMap[type];
|
||||
|
||||
return (
|
||||
<div className="rounded-xl bg-gray-50 p-2 shadow-sm">
|
||||
<div className="flex p-4">
|
||||
{Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
|
||||
<h3 className="ml-2 text-sm font-medium">{title}</h3>
|
||||
</div>
|
||||
<p
|
||||
className={`${lusitana.className}
|
||||
truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,41 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
import { GlobalSummary as Summary} from '@/app/lib/definitions';
|
||||
import { MainCard, SecondaryCard } from '../components/dashboard-cards';
|
||||
|
||||
export default function GlobalSummary({ summary }: { summary: Summary }) {
|
||||
return (
|
||||
<div className="my-4">
|
||||
<div className="flex flex-row w-full my-2">
|
||||
<div className="flex flex-col">
|
||||
<MainCard amount={`${summary.expenses.projected.total}€`} title="Projected" subtitle={`${summary.expenses.projected.guests} guests`} style="blue" iconName="ArrowTrendingUpIcon" />
|
||||
<MainCard amount={`${Math.round(summary.expenses.projected.total / summary.expenses.projected.guests)}€`} title="/ guest" iconName="UserIcon" style='blue' />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<MainCard amount={`${summary.expenses.confirmed.total}€`} title="Min." subtitle={`${summary.expenses.confirmed.guests} guests`} iconName="ChevronDoubleDownIcon" style="green" />
|
||||
<MainCard amount={`${Math.round(summary.expenses.confirmed.total / summary.expenses.confirmed.guests)}€`} title="/ guest" iconName="UserIcon" style='green' />
|
||||
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<MainCard amount={`${summary.expenses.status.paid}€`} title="Paid already" subtitle={`${Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="CheckIcon" style='blue' />
|
||||
<MainCard amount={`${summary.expenses.projected.total - summary.expenses.status.paid}€`} title="To pay" subtitle={`${100 - Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="BanknotesIcon" style="orange" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row w-full my-2">
|
||||
<MainCard style="blue" amount={summary.guests.total.toString()} title="Invites sent" iconName="UsersIcon" />
|
||||
|
||||
<div className="flex flex-col">
|
||||
<SecondaryCard amount={`${Math.round(summary.guests.confirmed / summary.guests.total * 100)}%`} title={`confirmed (${summary.guests.confirmed} guests)`} iconName="CheckIcon" style='green' />
|
||||
<SecondaryCard amount={`${Math.round(summary.guests.declined / summary.guests.total * 100)}%`} title={`declined (${summary.guests.declined} guests)`} iconName="XMarkIcon" style='red' />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<SecondaryCard amount={`${Math.round(summary.guests.tentative / summary.guests.total * 100)}%`} title={`tentative (${summary.guests.tentative} guests)`} iconName="QuestionMarkCircleIcon" style='orange' />
|
||||
<SecondaryCard amount={`${Math.round(summary.guests.invited / summary.guests.total * 100)}%`} title={`awaiting (${summary.guests.invited} guests)`} iconName="EllipsisHorizontalIcon" style='gray' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
66
app/ui/dashboard/latest-invoices.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { ArrowPathIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import Image from 'next/image';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import { LatestInvoice } from '@/app/lib/definitions';
|
||||
export default async function Latestguests({
|
||||
latestguests,
|
||||
}: {
|
||||
latestguests: LatestInvoice[];
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-full flex-col md:col-span-4">
|
||||
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
|
||||
Latest guests
|
||||
</h2>
|
||||
<div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
|
||||
{/* NOTE: Uncomment this code in Chapter 7 */}
|
||||
|
||||
{/* <div className="bg-white px-6">
|
||||
{latestguests.map((invoice, i) => {
|
||||
return (
|
||||
<div
|
||||
key={invoice.id}
|
||||
className={clsx(
|
||||
'flex flex-row items-center justify-between py-4',
|
||||
{
|
||||
'border-t': i !== 0,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
src={invoice.image_url}
|
||||
alt={`${invoice.name}'s profile picture`}
|
||||
className="mr-4 rounded-full"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-semibold md:text-base">
|
||||
{invoice.name}
|
||||
</p>
|
||||
<p className="hidden text-sm text-gray-500 sm:block">
|
||||
{invoice.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
|
||||
>
|
||||
{invoice.amount}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div> */}
|
||||
<div className="flex items-center pb-2 pt-6">
|
||||
<ArrowPathIcon className="h-5 w-5 text-gray-500" />
|
||||
<h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
export default function Loading() {
|
||||
return <div>Loading...</div>;
|
||||
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'use client'
|
||||
|
||||
@ -6,30 +6,23 @@ import {
|
||||
UserGroupIcon,
|
||||
RectangleGroupIcon,
|
||||
BanknotesIcon,
|
||||
GlobeAltIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import clsx from 'clsx';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
// Map of links to display in the side navigation.
|
||||
// Depending on the size of the application, this would be stored in a database.
|
||||
const links = [
|
||||
{ name: 'Guests', href: '/dashboard/guests', icon: UserGroupIcon },
|
||||
{ name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
|
||||
{ name: 'Table distributions', href: '/dashboard/tables', icon: RectangleGroupIcon },
|
||||
];
|
||||
|
||||
|
||||
export default function NavLinks() {
|
||||
const pathname = usePathname();
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => { setSlug(getSlug()) }, []);
|
||||
|
||||
const links = [
|
||||
{ name: 'Guests', href: `/${slug}/dashboard/guests`, icon: UserGroupIcon },
|
||||
{ name: 'Expenses', href: `/${slug}/dashboard/expenses`, icon: BanknotesIcon },
|
||||
{ name: 'Table distributions', href: `/${slug}/dashboard/tables`, icon: RectangleGroupIcon },
|
||||
{ name: 'Website builder', href: `/${slug}/dashboard/website`, icon: GlobeAltIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{links.map((link) => {
|
||||
|
67
app/ui/dashboard/revenue-chart.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { generateYAxis } from '@/app/lib/utils';
|
||||
import { CalendarIcon } from '@heroicons/react/24/outline';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import { Revenue } from '@/app/lib/definitions';
|
||||
|
||||
// This component is representational only.
|
||||
// For data visualization UI, check out:
|
||||
// https://www.tremor.so/
|
||||
// https://www.chartjs.org/
|
||||
// https://airbnb.io/visx/
|
||||
|
||||
export default async function RevenueChart({
|
||||
revenue,
|
||||
}: {
|
||||
revenue: Revenue[];
|
||||
}) {
|
||||
const chartHeight = 350;
|
||||
// NOTE: Uncomment this code in Chapter 7
|
||||
|
||||
// const { yAxisLabels, topLabel } = generateYAxis(revenue);
|
||||
|
||||
// if (!revenue || revenue.length === 0) {
|
||||
// return <p className="mt-4 text-gray-400">No data available.</p>;
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className="w-full md:col-span-4">
|
||||
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
|
||||
Recent Revenue
|
||||
</h2>
|
||||
{/* NOTE: Uncomment this code in Chapter 7 */}
|
||||
|
||||
{/* <div className="rounded-xl bg-gray-50 p-4">
|
||||
<div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
|
||||
<div
|
||||
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
|
||||
style={{ height: `${chartHeight}px` }}
|
||||
>
|
||||
{yAxisLabels.map((label) => (
|
||||
<p key={label}>{label}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{revenue.map((month) => (
|
||||
<div key={month.month} className="flex flex-col items-center gap-2">
|
||||
<div
|
||||
className="w-full rounded-md bg-blue-300"
|
||||
style={{
|
||||
height: `${(chartHeight / topLabel) * month.revenue}px`,
|
||||
}}
|
||||
></div>
|
||||
<p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
|
||||
{month.month}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center pb-2 pt-6">
|
||||
<CalendarIcon className="h-5 w-5 text-gray-500" />
|
||||
<h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,54 +1,30 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import NavLinks from '@/app/ui/dashboard/nav-links';
|
||||
import { PowerIcon } from '@heroicons/react/24/outline';
|
||||
import { gloriaHallelujah } from '@/app/ui/fonts';
|
||||
import { logout } from '@/app/api/authentication';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function SideNav() {
|
||||
const router = useRouter();
|
||||
|
||||
const [slug, setSlug] = useState<string>("default");
|
||||
useEffect(() => { setSlug(getSlug()) }, []);
|
||||
|
||||
const [currentUser, setCurrentUser] = useState<{ email: string } | null>(null);
|
||||
useEffect(() => { setCurrentUser(JSON.parse(localStorage.getItem('currentUser') || '{}')) }, []);
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col px-3 py-4 md:px-2">
|
||||
<Link
|
||||
className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
|
||||
href={`/${slug}/dashboard`}
|
||||
href="/dashboard/guests"
|
||||
>
|
||||
<div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
|
||||
<div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased` }>
|
||||
<h1>Wedding Planner</h1>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
|
||||
<NavLinks />
|
||||
<div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
|
||||
<span>Logged in as {currentUser?.email}</span>
|
||||
<button
|
||||
className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
|
||||
onClick={() => {
|
||||
logout({
|
||||
onLogout: () => {
|
||||
localStorage.clear();
|
||||
router.push(`/${slug}`);
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PowerIcon className="w-6" />
|
||||
<div className="hidden md:block">Sign Out</div>
|
||||
</button>
|
||||
<form>
|
||||
<button className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
|
||||
<PowerIcon className="w-6" />
|
||||
<div className="hidden md:block">Sign Out</div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
45
app/ui/expenses/summary.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { MainCard, SecondaryCard } from '../components/dashboard-cards';
|
||||
|
||||
export default async function ExpenseSummary() {
|
||||
return (
|
||||
<div className="my-4">
|
||||
|
||||
<div className="flex flex-row w-full my-2">
|
||||
<MainCard style="green" amount="65000€" title="Projected" subtitle="150 guests" iconName="ArrowTrendingUpIcon" />
|
||||
|
||||
<div className="flex flex-col">
|
||||
<MainCard amount="10000€" title="Paid already" iconName="Square3Stack3DIcon" style='blue' />
|
||||
<MainCard amount="198€" title="/ guest" iconName="UserIcon" style='blue' />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<MainCard amount="78000€" title="Max." subtitle='200 guests' iconName="ChevronDoubleUpIcon" style="orange" />
|
||||
<MainCard amount="45000€" title="Min." subtitle="125 guests" iconName="ChevronDoubleDownIcon" style="green" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row w-full my-2">
|
||||
<MainCard style="blue" amount="150" title="Invites sent" iconName="UsersIcon" />
|
||||
|
||||
<div className="flex flex-col">
|
||||
<SecondaryCard amount="31%" title="confirmed (27 guests)" iconName="CheckIcon" style='green' />
|
||||
<SecondaryCard amount="5%" title="declined (8 guests)" iconName="XMarkIcon" style='red' />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<SecondaryCard amount="17%" title="tentative (14 guests)" iconName="QuestionMarkCircleIcon" style='orange' />
|
||||
<SecondaryCard amount="65%" title="awaiting (72 guests)" iconName="EllipsisHorizontalIcon" style='gray' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row w-full my-2">
|
||||
<MainCard style="blue" amount="5" title="Table simulations" iconName="ServerStackIcon" />
|
||||
<MainCard style="blue" amount="9" title="Bus simulations" iconName="TruckIcon" />
|
||||
<MainCard style="blue" amount="98" title="QR codes" iconName="QrCodeIcon" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,46 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client'
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Expense, ExpenseSerializer } from '@/app/lib/expense';
|
||||
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import TableOfContents from "../components/table-of-contents";
|
||||
|
||||
|
||||
export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
|
||||
expenses: Expense[],
|
||||
onUpdate: () => void,
|
||||
onEdit: (expense: Expense) => void,
|
||||
}) {
|
||||
|
||||
const api = new AbstractApi<Expense>();
|
||||
const serializer = new ExpenseSerializer();
|
||||
|
||||
return (
|
||||
<TableOfContents
|
||||
headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
|
||||
caption='Expenses'
|
||||
elements={expenses}
|
||||
rowRender={(expense) => (
|
||||
<tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{expense.name}
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
{expense.amount}
|
||||
</td>
|
||||
<td>
|
||||
{expense.pricingType}
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex flex-row items-center">
|
||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, expense, onUpdate) }} />
|
||||
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(expense)} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { Inter, Lusitana, Gloria_Hallelujah} from 'next/font/google';
|
||||
|
||||
|
@ -1,110 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Group, GroupSerializer } from '@/app/lib/group';
|
||||
import { AdjustmentsHorizontalIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import { Column } from 'primereact/column';
|
||||
import { TreeNode } from 'primereact/treenode';
|
||||
import { TreeTable } from 'primereact/treetable';
|
||||
|
||||
export default function GroupsTable({ groups, onUpdate, onEdit, onEditAffinities }: {
|
||||
groups: Group[],
|
||||
onUpdate: () => void,
|
||||
onEdit: (group: Group) => void,
|
||||
onEditAffinities: (group: Group) => void,
|
||||
}) {
|
||||
|
||||
const api = new AbstractApi<Group>();
|
||||
const serializer = new GroupSerializer();
|
||||
|
||||
const actions = (group: Group) => (
|
||||
<div className="flex flex-row items-center">
|
||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => {
|
||||
if (window.confirm(`Are you sure you want to delete guest "${group.name}"?`)) {
|
||||
api.destroy(serializer, group, onUpdate)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
|
||||
<AdjustmentsHorizontalIcon className='size-6 cursor-pointer' onClick={() => onEditAffinities(group)} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const index = groups.reduce((acc, group) => {
|
||||
if (group.id) {
|
||||
acc.set(group.id, group)
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, new Map());
|
||||
|
||||
groups.forEach(group => group.children = []);
|
||||
groups.forEach(group => {
|
||||
if (group.parentId) {
|
||||
const parent = index.get(group.parentId);
|
||||
if (parent) {
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
parent.children.push(group);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const renderTree = (group: Group): TreeNode => {
|
||||
const childrenAttendance = (group.children || []).reduce((acc, child) => {
|
||||
acc.confirmed += child.attendance?.confirmed || 0;
|
||||
acc.tentative += child.attendance?.tentative || 0;
|
||||
acc.invited += child.attendance?.invited || 0;
|
||||
acc.declined += child.attendance?.declined || 0;
|
||||
acc.considered += child.attendance?.considered || 0;
|
||||
acc.total += child.attendance?.total || 0;
|
||||
return acc;
|
||||
}, { confirmed: 0, tentative: 0, invited: 0, declined: 0, considered: 0, total: 0 });
|
||||
|
||||
return {
|
||||
id: group.id,
|
||||
key: group.id,
|
||||
label: group.name,
|
||||
data: {
|
||||
name: group.name,
|
||||
color: <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }} />,
|
||||
confirmed: childrenAttendance.confirmed + (group.attendance?.confirmed || 0),
|
||||
tentative: childrenAttendance.tentative + (group.attendance?.tentative || 0),
|
||||
pending: childrenAttendance.invited + (group.attendance?.invited || 0),
|
||||
declined: childrenAttendance.declined + (group.attendance?.declined || 0),
|
||||
considered: childrenAttendance.considered + (group.attendance?.considered || 0),
|
||||
total: childrenAttendance.total + (group.attendance?.total || 0),
|
||||
actions: actions(group),
|
||||
},
|
||||
children: group.children?.map(renderTree),
|
||||
}
|
||||
}
|
||||
|
||||
const nodes: TreeNode[] = groups
|
||||
.filter(group => !group.parentId)
|
||||
.map(renderTree)
|
||||
|
||||
const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
|
||||
const rowClassName = () => {
|
||||
return { 'border-b odd:bg-white even:bg-gray-50 hover:bg-gray-100': true };
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TreeTable value={nodes} rowClassName={rowClassName} className='py-4'>
|
||||
<Column expander field="name" header="Name" className='w-2/5' />
|
||||
<Column field="color" header="Color" bodyClassName="text-sm" />
|
||||
<Column field="confirmed" header="Confirmed" bodyClassName="text-sm" />
|
||||
<Column field="tentative" header="Tentative" bodyClassName="text-sm" />
|
||||
<Column field="pending" header="Pending" bodyClassName="text-sm" />
|
||||
<Column field="declined" header="Declined" bodyClassName="text-sm" />
|
||||
<Column field="considered" header="Considered" bodyClassName="text-sm" />
|
||||
<Column field="total" header="Total" bodyClassName="text-sm" />
|
||||
<Column field="actions" header="Actions" />
|
||||
</TreeTable>
|
||||
</>
|
||||
)
|
||||
}
|
65
app/ui/guests/affinity-groups-tree.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, Suspense } from 'react';
|
||||
import { Tree } from 'primereact/tree';
|
||||
import { PrimeIcons } from 'primereact/api';
|
||||
import { debug } from 'console';
|
||||
import { Group } from '@/app/lib/definitions';
|
||||
|
||||
export default function AffinityGroupsTree() {
|
||||
const [nodes, setNodes] = useState([]);
|
||||
|
||||
const groupToNode = (group: Group): any => {
|
||||
return({
|
||||
key: group.id,
|
||||
label: `${group.name} (${group.guest_count})`,
|
||||
icon: group.icon,
|
||||
children: group.children.map((child) => groupToNode(child)),
|
||||
className: "px-4",
|
||||
})
|
||||
}
|
||||
|
||||
const parseNode = (record: any, included: any[]): Group => {
|
||||
if (!record.attributes) {
|
||||
record = included.find((a) => a.id === record.id);
|
||||
}
|
||||
|
||||
const children: Group[] = (record?.relationships?.children?.data || []).map((child: any) => {
|
||||
return (parseNode(child, included));
|
||||
});
|
||||
|
||||
const children_guest_count: number = children.reduce((acc: number, child: Group) => acc + child.guest_count, 0);
|
||||
|
||||
return ({
|
||||
id: record.id,
|
||||
name: record.attributes.name,
|
||||
guest_count: record.attributes.guest_count + children_guest_count,
|
||||
icon: record.attributes.icon,
|
||||
children: children,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (nodes.length > 0) {
|
||||
return;
|
||||
}
|
||||
fetch("/api/groups.json")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setNodes(data.data.map((record: any) => {
|
||||
return (groupToNode(parseNode(record, data.included)));
|
||||
}))
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="card flex justify-content-center">
|
||||
<Suspense>
|
||||
<Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value as any)} className="w-full md:w-30rem" />
|
||||
</Suspense>
|
||||
</div>
|
||||
)
|
||||
}
|
38
app/ui/guests/breadcrumbs.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { clsx } from 'clsx';
|
||||
import Link from 'next/link';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
|
||||
interface Breadcrumb {
|
||||
label: string;
|
||||
href: string;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
export default function Breadcrumbs({
|
||||
breadcrumbs,
|
||||
}: {
|
||||
breadcrumbs: Breadcrumb[];
|
||||
}) {
|
||||
return (
|
||||
<nav aria-label="Breadcrumb" className="mb-6 block">
|
||||
<ol className={clsx(lusitana.className, 'flex text-xl md:text-2xl')}>
|
||||
{breadcrumbs.map((breadcrumb, index) => (
|
||||
<li
|
||||
key={breadcrumb.href}
|
||||
aria-current={breadcrumb.active}
|
||||
className={clsx(
|
||||
breadcrumb.active ? 'text-gray-900' : 'text-gray-500',
|
||||
)}
|
||||
>
|
||||
<Link href={breadcrumb.href}>{breadcrumb.label}</Link>
|
||||
{index < breadcrumbs.length - 1 ? (
|
||||
<span className="mx-3 inline-block">/</span>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
}
|
38
app/ui/guests/buttons.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
|
||||
export function CreateInvoice() {
|
||||
return (
|
||||
<Link
|
||||
href="/dashboard/guests/create"
|
||||
className="flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<span className="hidden md:block">Create Invoice</span>{' '}
|
||||
<PlusIcon className="h-5 md:ml-4" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function UpdateInvoice({ id }: { id: string }) {
|
||||
return (
|
||||
<Link
|
||||
href="/dashboard/guests"
|
||||
className="rounded-md border p-2 hover:bg-gray-100"
|
||||
>
|
||||
<PencilIcon className="w-5" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeleteInvoice({ id }: { id: string }) {
|
||||
return (
|
||||
<>
|
||||
<button className="rounded-md border p-2 hover:bg-gray-100">
|
||||
<span className="sr-only">Delete</span>
|
||||
<TrashIcon className="w-5" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
114
app/ui/guests/create-form.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { CustomerField } from '@/app/lib/definitions';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
CheckIcon,
|
||||
ClockIcon,
|
||||
CurrencyDollarIcon,
|
||||
UserCircleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { Button } from '@/app/ui/button';
|
||||
|
||||
export default function Form({ customers }: { customers: CustomerField[] }) {
|
||||
return (
|
||||
<form>
|
||||
<div className="rounded-md bg-gray-50 p-4 md:p-6">
|
||||
{/* Customer Name */}
|
||||
<div className="mb-4">
|
||||
<label htmlFor="customer" className="mb-2 block text-sm font-medium">
|
||||
Choose customer
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
id="customer"
|
||||
name="customerId"
|
||||
className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
|
||||
defaultValue=""
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select a customer
|
||||
</option>
|
||||
{customers.map((customer) => (
|
||||
<option key={customer.id} value={customer.id}>
|
||||
{customer.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invoice Amount */}
|
||||
<div className="mb-4">
|
||||
<label htmlFor="amount" className="mb-2 block text-sm font-medium">
|
||||
Choose an amount
|
||||
</label>
|
||||
<div className="relative mt-2 rounded-md">
|
||||
<div className="relative">
|
||||
<input
|
||||
id="amount"
|
||||
name="amount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Enter USD amount"
|
||||
className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
|
||||
/>
|
||||
<CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invoice Status */}
|
||||
<fieldset>
|
||||
<legend className="mb-2 block text-sm font-medium">
|
||||
Set the invoice status
|
||||
</legend>
|
||||
<div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="pending"
|
||||
name="status"
|
||||
type="radio"
|
||||
value="pending"
|
||||
className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
|
||||
/>
|
||||
<label
|
||||
htmlFor="pending"
|
||||
className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600"
|
||||
>
|
||||
Pending <ClockIcon className="h-4 w-4" />
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="paid"
|
||||
name="status"
|
||||
type="radio"
|
||||
value="paid"
|
||||
className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
|
||||
/>
|
||||
<label
|
||||
htmlFor="paid"
|
||||
className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white"
|
||||
>
|
||||
Paid <CheckIcon className="h-4 w-4" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end gap-4">
|
||||
<Link
|
||||
href="/dashboard/guests"
|
||||
className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
<Button type="submit">Create Invoice</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
125
app/ui/guests/edit-form.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { CustomerField, InvoiceForm } from '@/app/lib/definitions';
|
||||
import {
|
||||
CheckIcon,
|
||||
ClockIcon,
|
||||
CurrencyDollarIcon,
|
||||
UserCircleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/app/ui/button';
|
||||
|
||||
export default function EditInvoiceForm({
|
||||
invoice,
|
||||
customers,
|
||||
}: {
|
||||
invoice: InvoiceForm;
|
||||
customers: CustomerField[];
|
||||
}) {
|
||||
return (
|
||||
<form>
|
||||
<div className="rounded-md bg-gray-50 p-4 md:p-6">
|
||||
{/* Customer Name */}
|
||||
<div className="mb-4">
|
||||
<label htmlFor="customer" className="mb-2 block text-sm font-medium">
|
||||
Choose customer
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
id="customer"
|
||||
name="customerId"
|
||||
className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
|
||||
defaultValue={invoice.customer_id}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select a customer
|
||||
</option>
|
||||
{customers.map((customer) => (
|
||||
<option key={customer.id} value={customer.id}>
|
||||
{customer.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invoice Amount */}
|
||||
<div className="mb-4">
|
||||
<label htmlFor="amount" className="mb-2 block text-sm font-medium">
|
||||
Choose an amount
|
||||
</label>
|
||||
<div className="relative mt-2 rounded-md">
|
||||
<div className="relative">
|
||||
<input
|
||||
id="amount"
|
||||
name="amount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
defaultValue={invoice.amount}
|
||||
placeholder="Enter USD amount"
|
||||
className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
|
||||
/>
|
||||
<CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invoice Status */}
|
||||
<fieldset>
|
||||
<legend className="mb-2 block text-sm font-medium">
|
||||
Set the invoice status
|
||||
</legend>
|
||||
<div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="pending"
|
||||
name="status"
|
||||
type="radio"
|
||||
value="pending"
|
||||
defaultChecked={invoice.status === 'pending'}
|
||||
className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
|
||||
/>
|
||||
<label
|
||||
htmlFor="pending"
|
||||
className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600"
|
||||
>
|
||||
Pending <ClockIcon className="h-4 w-4" />
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="paid"
|
||||
name="status"
|
||||
type="radio"
|
||||
value="paid"
|
||||
defaultChecked={invoice.status === 'paid'}
|
||||
className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
|
||||
/>
|
||||
<label
|
||||
htmlFor="paid"
|
||||
className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white"
|
||||
>
|
||||
Paid <CheckIcon className="h-4 w-4" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end gap-4">
|
||||
<Link
|
||||
href="/dashboard/guests"
|
||||
className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
<Button type="submit">Edit Invoice</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
121
app/ui/guests/pagination.tsx
Normal file
@ -0,0 +1,121 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import Link from 'next/link';
|
||||
import { generatePagination } from '@/app/lib/utils';
|
||||
|
||||
export default function Pagination({ totalPages }: { totalPages: number }) {
|
||||
// NOTE: Uncomment this code in Chapter 11
|
||||
|
||||
// const allPages = generatePagination(currentPage, totalPages);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* NOTE: Uncomment this code in Chapter 11 */}
|
||||
|
||||
{/* <div className="inline-flex">
|
||||
<PaginationArrow
|
||||
direction="left"
|
||||
href={createPageURL(currentPage - 1)}
|
||||
isDisabled={currentPage <= 1}
|
||||
/>
|
||||
|
||||
<div className="flex -space-x-px">
|
||||
{allPages.map((page, index) => {
|
||||
let position: 'first' | 'last' | 'single' | 'middle' | undefined;
|
||||
|
||||
if (index === 0) position = 'first';
|
||||
if (index === allPages.length - 1) position = 'last';
|
||||
if (allPages.length === 1) position = 'single';
|
||||
if (page === '...') position = 'middle';
|
||||
|
||||
return (
|
||||
<PaginationNumber
|
||||
key={page}
|
||||
href={createPageURL(page)}
|
||||
page={page}
|
||||
position={position}
|
||||
isActive={currentPage === page}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<PaginationArrow
|
||||
direction="right"
|
||||
href={createPageURL(currentPage + 1)}
|
||||
isDisabled={currentPage >= totalPages}
|
||||
/>
|
||||
</div> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationNumber({
|
||||
page,
|
||||
href,
|
||||
isActive,
|
||||
position,
|
||||
}: {
|
||||
page: number | string;
|
||||
href: string;
|
||||
position?: 'first' | 'last' | 'middle' | 'single';
|
||||
isActive: boolean;
|
||||
}) {
|
||||
const className = clsx(
|
||||
'flex h-10 w-10 items-center justify-center text-sm border',
|
||||
{
|
||||
'rounded-l-md': position === 'first' || position === 'single',
|
||||
'rounded-r-md': position === 'last' || position === 'single',
|
||||
'z-10 bg-blue-600 border-blue-600 text-white': isActive,
|
||||
'hover:bg-gray-100': !isActive && position !== 'middle',
|
||||
'text-gray-300': position === 'middle',
|
||||
},
|
||||
);
|
||||
|
||||
return isActive || position === 'middle' ? (
|
||||
<div className={className}>{page}</div>
|
||||
) : (
|
||||
<Link href={href} className={className}>
|
||||
{page}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function PaginationArrow({
|
||||
href,
|
||||
direction,
|
||||
isDisabled,
|
||||
}: {
|
||||
href: string;
|
||||
direction: 'left' | 'right';
|
||||
isDisabled?: boolean;
|
||||
}) {
|
||||
const className = clsx(
|
||||
'flex h-10 w-10 items-center justify-center rounded-md border',
|
||||
{
|
||||
'pointer-events-none text-gray-300': isDisabled,
|
||||
'hover:bg-gray-100': !isDisabled,
|
||||
'mr-2 md:mr-4': direction === 'left',
|
||||
'ml-2 md:ml-4': direction === 'right',
|
||||
},
|
||||
);
|
||||
|
||||
const icon =
|
||||
direction === 'left' ? (
|
||||
<ArrowLeftIcon className="w-4" />
|
||||
) : (
|
||||
<ArrowRightIcon className="w-4" />
|
||||
);
|
||||
|
||||
return isDisabled ? (
|
||||
<div className={className}>{icon}</div>
|
||||
) : (
|
||||
<Link className={className} href={href}>
|
||||
{icon}
|
||||
</Link>
|
||||
);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import Skeleton from '@/app/ui/skeleton';
|
||||
|
||||
|
31
app/ui/guests/status.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
|
||||
export default function gueststatus({ status }: { status: string }) {
|
||||
return (
|
||||
<span
|
||||
className={clsx(
|
||||
'inline-flex items-center rounded-full px-2 py-1 text-xs',
|
||||
{
|
||||
'bg-gray-100 text-gray-500': status === 'pending',
|
||||
'bg-green-500 text-white': status === 'paid',
|
||||
},
|
||||
)}
|
||||
>
|
||||
{status === 'pending' ? (
|
||||
<>
|
||||
Pending
|
||||
<ClockIcon className="ml-1 w-4 text-gray-500" />
|
||||
</>
|
||||
) : null}
|
||||
{status === 'paid' ? (
|
||||
<>
|
||||
Paid
|
||||
<CheckIcon className="ml-1 w-4 text-white" />
|
||||
</>
|
||||
) : null}
|
||||
</span>
|
||||
);
|
||||
}
|
@ -1,64 +1,125 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from '@/app/api/abstract-api';
|
||||
import { Guest, GuestSerializer } from '@/app/lib/guest';
|
||||
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import TableOfContents from '../components/table-of-contents';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Guest } from '@/app/lib/definitions';
|
||||
import { getCsrfToken } from '@/app/lib/utils';
|
||||
|
||||
export default function guestsTable({ guests, onUpdate, onEdit }: {
|
||||
guests: Guest[],
|
||||
onUpdate: () => void,
|
||||
onEdit: (guest: Guest) => void
|
||||
}) {
|
||||
export default function guestsTable() {
|
||||
const [guests, setGuests] = useState<Array<Guest>>([]);
|
||||
|
||||
const api = new AbstractApi<Guest>();
|
||||
const serializer = new GuestSerializer();
|
||||
function loadGuests() {
|
||||
fetch("/api/guests.json")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setGuests(data.data.map((record: any) => {
|
||||
return ({
|
||||
id: record.id,
|
||||
name: record.attributes.name,
|
||||
email: record.attributes.email,
|
||||
group_name: record.attributes.group_name,
|
||||
status: record.attributes.status
|
||||
});
|
||||
}));
|
||||
}, (error) => {
|
||||
return [];
|
||||
});
|
||||
};
|
||||
|
||||
const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
|
||||
const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
|
||||
const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
|
||||
const handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');
|
||||
|
||||
const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status:string) => {
|
||||
fetch("/api/guests/bulk_update.json",
|
||||
{
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ properties: { status: status }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}
|
||||
})
|
||||
.then(() => loadGuests())
|
||||
.catch((error) => console.error(error));
|
||||
}
|
||||
|
||||
guests.length === 0 && loadGuests();
|
||||
const ctaClassName = "text-white py-1 px-2 mx-1 rounded";
|
||||
|
||||
return (
|
||||
<TableOfContents
|
||||
headers={['Name', 'Group', 'Status', 'Actions']}
|
||||
caption='Guests'
|
||||
elements={guests}
|
||||
rowRender={(guest) => (
|
||||
<tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
||||
<td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{guest.name}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{guest.group?.name}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="flex items-center text-sm dark:text-white me-3">
|
||||
<span className={clsx(
|
||||
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
|
||||
{
|
||||
'bg-gray-400': guest.status === 'considered',
|
||||
'bg-blue-400': guest.status === 'invited',
|
||||
'bg-green-600': guest.status === 'confirmed',
|
||||
'bg-red-400': guest.status === 'declined',
|
||||
'bg-yellow-400': guest.status === 'tentative',
|
||||
}
|
||||
)}>
|
||||
</span>
|
||||
{guest.status}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex flex-row items-center">
|
||||
<TrashIcon className='size-6 cursor-pointer' onClick={() => {
|
||||
if (window.confirm(`Are you sure you want to delete guest "${guest.name}"?`)) {
|
||||
api.destroy(serializer, guest, onUpdate)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
/>
|
||||
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
|
||||
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
|
||||
Guests
|
||||
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||
There are {guests.length} guests in the list
|
||||
</p>
|
||||
</caption>
|
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Email
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Group
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Status
|
||||
</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{guests.map((guest) => (
|
||||
<tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{guest.name}
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
{guest.email}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{guest.group_name}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="flex items-center text-sm dark:text-white me-3">
|
||||
<span className={clsx(
|
||||
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
|
||||
{
|
||||
'bg-gray-400': guest.status === 'Considered',
|
||||
'bg-blue-400': guest.status === 'Invited',
|
||||
'bg-green-600': guest.status === 'Confirmed',
|
||||
'bg-red-400': guest.status === 'Declined',
|
||||
'bg-yellow-400': guest.status === 'Tentative',
|
||||
}
|
||||
)}>
|
||||
</span>
|
||||
{guest.status}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={`${ctaClassName} bg-blue-400 hover:bg-blue-600`}>
|
||||
Invite
|
||||
</button>)}
|
||||
{(guest.status === 'Invited' || guest.status === 'Tentative') && (
|
||||
<>
|
||||
<button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>Confirm</button>
|
||||
{guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-yellow-500 hover:bg-yellow-700`}>Tentative</button>}
|
||||
<button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>Decline</button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,218 +0,0 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AbstractApi } from "@/app/api/abstract-api";
|
||||
import { Guest } from "@/app/lib/guest";
|
||||
import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
|
||||
import { getSlug } from "@/app/lib/utils";
|
||||
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
||||
import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useState } from "react";
|
||||
import { classNames } from "../components/button";
|
||||
import { Toast } from "primereact/toast";
|
||||
|
||||
function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
|
||||
invitation: Invitation,
|
||||
allGuests: Guest[],
|
||||
onGuestAdded: (guest: Guest) => void,
|
||||
onDestroy: (invitation: Invitation) => void
|
||||
}
|
||||
) {
|
||||
const [guests, setGuests] = useState<Guest[]>(invitation.guests);
|
||||
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const api = new AbstractApi<Invitation>();
|
||||
const serializer = new InvitationSerializer();
|
||||
|
||||
const iconClassName = "w-5 h-5 text-white absolute top-2 opacity-0 group-hover:opacity-100 cursor-pointer";
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
return dropTargetForElements({
|
||||
element: ref.current,
|
||||
onDrop: (data) => {
|
||||
const guestId = data.source.element.dataset.guestId;
|
||||
if (guestId) {
|
||||
const guestToAdd = allGuests.find((guest) => guest.id === guestId);
|
||||
if (guestToAdd) {
|
||||
setGuests((prevGuests) => [...prevGuests, guestToAdd]);
|
||||
invitation.guests.push(guestToAdd);
|
||||
|
||||
api.update(serializer, invitation, () => {
|
||||
onGuestAdded(guestToAdd);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={invitation.id}
|
||||
ref={ref}
|
||||
className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
|
||||
style={{ aspectRatio: "1.618 / 1" }}
|
||||
>
|
||||
<LinkIcon
|
||||
className={`${iconClassName} right-8`}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`https://${window.location.host}/${getSlug()}/site/invitation/${invitation.id}`);
|
||||
}}
|
||||
/>
|
||||
<TrashIcon
|
||||
className={`${iconClassName} right-2`}
|
||||
onClick={() => {
|
||||
if (window.confirm("Are you sure you want to delete this invitation?")) {
|
||||
api.destroy(serializer, invitation, () => {
|
||||
onDestroy(invitation);
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
{guests.length === 0 ? (
|
||||
<p className="text-center text-yellow-500 text-lg italic">
|
||||
(empty invitation)
|
||||
</p>
|
||||
) : (
|
||||
<ul className="text-center text-yellow-500 text-lg">
|
||||
{guests.map((guest) => (
|
||||
<li key={guest.id}>{guest.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GuestCard(guest: Guest) {
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
return draggable({
|
||||
element: ref.current,
|
||||
});
|
||||
}
|
||||
}, [guest.id]);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={guest.id}
|
||||
ref={ref}
|
||||
className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
|
||||
draggable="true"
|
||||
data-guest-id={guest.id}>
|
||||
<h3 className="text-md font-medium">{guest.name}</h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function InvitationsBoard({ guests, invitations: originalInvitations }: {
|
||||
guests: Array<Guest>,
|
||||
invitations: Array<Invitation>
|
||||
}) {
|
||||
const toast = useRef<Toast>(null);
|
||||
const api = new AbstractApi<Invitation>();
|
||||
const serializer = new InvitationSerializer();
|
||||
|
||||
const [invitations, setInvitations] = useState<Invitation[]>(originalInvitations);
|
||||
const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
|
||||
guests.filter(
|
||||
(guest) =>
|
||||
guest.status !== 'considered' &&
|
||||
!invitations.some((invitation) =>
|
||||
invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
// Sort invitations to display those without guests at the top
|
||||
const sortedInvitations = [...invitations].sort((a, b) => {
|
||||
if (a.guests.length === 0 && b.guests.length > 0) return -1;
|
||||
if (a.guests.length > 0 && b.guests.length === 0) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
function handleCreateInvitation() {
|
||||
api.create(serializer, new Invitation(), (createdInvitation) => {
|
||||
setInvitations((prevInvitations) => [createdInvitation, ...prevInvitations]);
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadQrCodes() {
|
||||
api.post(serializer, 'email', () => {
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Email scheduled',
|
||||
detail: 'A document with the QR codes will be sent to the organizer\'s email.'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Left Column: Guests */}
|
||||
<Toast ref={toast} />
|
||||
<div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
|
||||
<h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
|
||||
<div>
|
||||
{unassignedGuests.map((guest) => (
|
||||
<GuestCard key={guest.id} {...guest} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Invitations */}
|
||||
<div className="w-3/4 h-full overflow-auto p-4">
|
||||
<h2 className="text-lg font-semibold mb-4">
|
||||
{invitations.length} invitations
|
||||
</h2>
|
||||
|
||||
<button
|
||||
onClick={handleCreateInvitation}
|
||||
className={classNames('primary')}
|
||||
>
|
||||
Create New Invitation
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleDownloadQrCodes}
|
||||
className={classNames('primary')}
|
||||
>
|
||||
Send QR codes via email
|
||||
</button>
|
||||
|
||||
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
|
||||
{sortedInvitations.map((invitation) => (
|
||||
<InvitationCard
|
||||
key={invitation.id}
|
||||
invitation={invitation}
|
||||
allGuests={guests}
|
||||
onGuestAdded={(guestAdded: Guest) => {
|
||||
setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
|
||||
}}
|
||||
onDestroy={(invitationToDestroy: Invitation) => {
|
||||
setInvitations((prevInvitations) => prevInvitations.filter(i => i.id !== invitationToDestroy.id));
|
||||
setUnassignedGuests((prevUnassignedGuests) => [
|
||||
...prevUnassignedGuests,
|
||||
...invitationToDestroy.guests
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
69
app/ui/login-form.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import {
|
||||
AtSymbolIcon,
|
||||
KeyIcon,
|
||||
ExclamationCircleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { ArrowRightIcon } from '@heroicons/react/20/solid';
|
||||
import { Button } from './button';
|
||||
|
||||
export default function LoginForm() {
|
||||
return (
|
||||
<form className="space-y-3">
|
||||
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
|
||||
<h1 className={`${lusitana.className} mb-3 text-2xl`}>
|
||||
Please log in to continue.
|
||||
</h1>
|
||||
<div className="w-full">
|
||||
<div>
|
||||
<label
|
||||
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
|
||||
htmlFor="email"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Enter your email address"
|
||||
required
|
||||
/>
|
||||
<AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
|
||||
htmlFor="password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Enter password"
|
||||
required
|
||||
minLength={6}
|
||||
/>
|
||||
<KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="mt-4 w-full">
|
||||
Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
|
||||
</Button>
|
||||
<div className="flex h-8 items-end space-x-1">
|
||||
{/* Add form errors here */}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'use client';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
export default function Skeleton({ className }: { className: string }) {
|
||||
return <div className={`bg-slate-200 motion-safe:animate-pulse rounded ${className}`} />;
|
||||
|
47
package.json
@ -3,42 +3,45 @@
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"start": "next start"
|
||||
"start": "next start",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
||||
"@heroicons/react": "^2.1.4",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tiptap/pm": "^2.14.0",
|
||||
"@tiptap/react": "^2.14.0",
|
||||
"@tiptap/starter-kit": "^2.14.0",
|
||||
"autoprefixer": "10.4.21",
|
||||
"bcrypt": "^6.0.0",
|
||||
"autoprefixer": "10.4.20",
|
||||
"bcrypt": "^5.1.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dompurify": "^3.2.6",
|
||||
"next": "15.3.5",
|
||||
"next-auth": "5.0.0-beta.29",
|
||||
"postcss": "8.5.6",
|
||||
"next": "15.0.2",
|
||||
"next-auth": "5.0.0-beta.25",
|
||||
"postcss": "8.4.47",
|
||||
"primeicons": "^7.0.0",
|
||||
"primereact": "^10.8.2",
|
||||
"react": "19.0.0-rc-f38c22b244-20240704",
|
||||
"react-dom": "19.0.0-rc-f38c22b244-20240704",
|
||||
"tailwindcss": "3.4.17",
|
||||
"typescript": "5.8.3",
|
||||
"storybook": "^8.4.0",
|
||||
"tailwindcss": "3.4.14",
|
||||
"typescript": "5.6.3",
|
||||
"use-debounce": "^10.0.1",
|
||||
"uuid": "11.1.0",
|
||||
"zod": "^4.0.0"
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.52.0",
|
||||
"@chromatic-com/storybook": "^3.2.2",
|
||||
"@playwright/test": "^1.46.0",
|
||||
"@storybook/addon-essentials": "^8.4.0",
|
||||
"@storybook/addon-interactions": "^8.4.0",
|
||||
"@storybook/addon-onboarding": "^8.4.0",
|
||||
"@storybook/blocks": "^8.4.0",
|
||||
"@storybook/nextjs": "^8.4.0",
|
||||
"@storybook/react": "^8.4.0",
|
||||
"@storybook/test": "^8.4.0",
|
||||
"@types/bcrypt": "^5.0.2",
|
||||
"@types/node": "24.0.10",
|
||||
"@types/react": "18.3.23",
|
||||
"@types/react-dom": "18.3.7",
|
||||
"wait-on": "^8.0.3"
|
||||
"@types/node": "22.8.6",
|
||||
"@types/react": "18.3.12",
|
||||
"@types/react-dom": "18.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=23.0.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad"
|
||||
}
|
||||
}
|
||||
|
@ -43,6 +43,11 @@ export default defineConfig({
|
||||
use: { ...devices['Desktop Firefox'] },
|
||||
},
|
||||
|
||||
{
|
||||
name: 'webkit',
|
||||
use: { ...devices['Desktop Safari'] },
|
||||
},
|
||||
|
||||
/* Test against mobile viewports. */
|
||||
// {
|
||||
// name: 'Mobile Chrome',
|
||||
|
7074
pnpm-lock.yaml
generated
BIN
public/customers/amy-burns.png
Normal file
After Width: | Height: | Size: 7.8 KiB |
BIN
public/customers/balazs-orban.png
Normal file
After Width: | Height: | Size: 7.8 KiB |
BIN
public/customers/delba-de-oliveira.png
Normal file
After Width: | Height: | Size: 5.7 KiB |
BIN
public/customers/evil-rabbit.png
Normal file
After Width: | Height: | Size: 1019 B |
BIN
public/customers/lee-robinson.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
BIN
public/customers/michael-novotny.png
Normal file
After Width: | Height: | Size: 9.7 KiB |
Before Width: | Height: | Size: 506 KiB |
BIN
public/stamp.png
Before Width: | Height: | Size: 45 KiB |
53
stories/Button.stories.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { fn } from '@storybook/test';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
||||
const meta = {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
parameters: {
|
||||
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'centered',
|
||||
},
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
||||
tags: ['autodocs'],
|
||||
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
||||
args: { onClick: fn() },
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
41
stories/Button.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
|
||||
import './button.css';
|
||||
|
||||
export interface ButtonProps {
|
||||
/** Is this the principal call to action on the page? */
|
||||
primary?: boolean;
|
||||
/** What background color to use */
|
||||
backgroundColor?: string;
|
||||
/** How large should the button be? */
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
/** Button contents */
|
||||
label: string;
|
||||
/** Optional click handler */
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
/** Primary UI component for user interaction */
|
||||
export const Button = ({
|
||||
primary = false,
|
||||
size = 'medium',
|
||||
backgroundColor,
|
||||
label,
|
||||
...props
|
||||
}: ButtonProps) => {
|
||||
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
<style jsx>{`
|
||||
button {
|
||||
background-color: ${backgroundColor};
|
||||
}
|
||||
`}</style>
|
||||
</button>
|
||||
);
|
||||
};
|
446
stories/Configure.mdx
Normal file
@ -0,0 +1,446 @@
|
||||
import { Meta } from "@storybook/blocks";
|
||||
import Image from "next/image";
|
||||
|
||||
import Github from "./assets/github.svg";
|
||||
import Discord from "./assets/discord.svg";
|
||||
import Youtube from "./assets/youtube.svg";
|
||||
import Tutorials from "./assets/tutorials.svg";
|
||||
import Styling from "./assets/styling.png";
|
||||
import Context from "./assets/context.png";
|
||||
import Assets from "./assets/assets.png";
|
||||
import Docs from "./assets/docs.png";
|
||||
import Share from "./assets/share.png";
|
||||
import FigmaPlugin from "./assets/figma-plugin.png";
|
||||
import Testing from "./assets/testing.png";
|
||||
import Accessibility from "./assets/accessibility.png";
|
||||
import Theming from "./assets/theming.png";
|
||||
import AddonLibrary from "./assets/addon-library.png";
|
||||
|
||||
export const RightArrow = () => <svg
|
||||
viewBox="0 0 14 14"
|
||||
width="8px"
|
||||
height="14px"
|
||||
style={{
|
||||
marginLeft: '4px',
|
||||
display: 'inline-block',
|
||||
shapeRendering: 'inherit',
|
||||
verticalAlign: 'middle',
|
||||
fill: 'currentColor',
|
||||
'path fill': 'currentColor'
|
||||
}}
|
||||
>
|
||||
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
|
||||
</svg>
|
||||
|
||||
<Meta title="Configure your project" />
|
||||
|
||||
<div className="sb-container">
|
||||
<div className='sb-section-title'>
|
||||
# Configure your project
|
||||
|
||||
Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
|
||||
</div>
|
||||
<div className="sb-section">
|
||||
<div className="sb-section-item">
|
||||
<Image
|
||||
src={Styling}
|
||||
alt="A wall of logos representing different styling technologies"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
/>
|
||||
<h4 className="sb-section-item-heading">Add styling and CSS</h4>
|
||||
<p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
<div className="sb-section-item">
|
||||
<Image
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
src={Context}
|
||||
alt="An abstraction representing the composition of data for a component"
|
||||
/>
|
||||
<h4 className="sb-section-item-heading">Provide context and mocking</h4>
|
||||
<p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
<div className="sb-section-item">
|
||||
<Image
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
src={Assets}
|
||||
alt="A representation of typography and image assets"
|
||||
/>
|
||||
<div>
|
||||
<h4 className="sb-section-item-heading">Load assets and resources</h4>
|
||||
<p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
|
||||
`staticDirs` configuration option to specify folders to load when
|
||||
starting Storybook.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sb-container">
|
||||
<div className='sb-section-title'>
|
||||
# Do more with Storybook
|
||||
|
||||
Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
|
||||
</div>
|
||||
|
||||
<div className="sb-section">
|
||||
<div className="sb-features-grid">
|
||||
<div className="sb-grid-item">
|
||||
<Image
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
src={Docs}
|
||||
alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated"
|
||||
/>
|
||||
<h4 className="sb-section-item-heading">Autodocs</h4>
|
||||
<p className="sb-section-item-paragraph">Auto-generate living,
|
||||
interactive reference documentation from your components and stories.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
<div className="sb-grid-item">
|
||||
<Image
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
src={Share}
|
||||
alt="A browser window showing a Storybook being published to a chromatic.com URL"
|
||||
/>
|
||||
<h4 className="sb-section-item-heading">Publish to Chromatic</h4>
|
||||
<p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
<div className="sb-grid-item">
|
||||
<Image
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
src={FigmaPlugin}
|
||||
alt="Windows showing the Storybook plugin in Figma"
|
||||
/>
|
||||
<h4 className="sb-section-item-heading">Figma Plugin</h4>
|
||||
<p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
|
||||
implementation in one place.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
<div className="sb-grid-item">
|
||||
<Image
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
src={Testing}
|
||||
alt="Screenshot of tests passing and failing"
|
||||
/>
|
||||
<h4 className="sb-section-item-heading">Testing</h4>
|
||||
<p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
|
||||
complex.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/writing-tests/?renderer=react"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
<div className="sb-grid-item">
|
||||
<Image
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
src={Accessibility}
|
||||
alt="Screenshot of accessibility tests passing and failing"
|
||||
/>
|
||||
<h4 className="sb-section-item-heading">Accessibility</h4>
|
||||
<p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
<div className="sb-grid-item">
|
||||
<Image
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
src={Theming}
|
||||
alt="Screenshot of Storybook in light and dark mode"
|
||||
/>
|
||||
<h4 className="sb-section-item-heading">Theming</h4>
|
||||
<p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/docs/configure/theming/?renderer=react"
|
||||
target="_blank"
|
||||
>Learn more<RightArrow /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='sb-addon'>
|
||||
<div className='sb-addon-text'>
|
||||
<h4>Addons</h4>
|
||||
<p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
|
||||
<a
|
||||
href="https://storybook.js.org/addons/"
|
||||
target="_blank"
|
||||
>Discover all addons<RightArrow /></a>
|
||||
</div>
|
||||
<div className='sb-addon-img'>
|
||||
<Image
|
||||
width={650}
|
||||
height={347}
|
||||
src={AddonLibrary}
|
||||
alt="Integrate your tools with Storybook to connect workflows."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sb-section sb-socials">
|
||||
<div className="sb-section-item">
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
layout="fixed"
|
||||
src={Github}
|
||||
alt="Github logo"
|
||||
className="sb-explore-image"
|
||||
/>
|
||||
Join our contributors building the future of UI development.
|
||||
|
||||
<a
|
||||
href="https://github.com/storybookjs/storybook"
|
||||
target="_blank"
|
||||
>Star on GitHub<RightArrow /></a>
|
||||
</div>
|
||||
<div className="sb-section-item">
|
||||
<Image
|
||||
width={33}
|
||||
height={32}
|
||||
layout="fixed"
|
||||
src={Discord}
|
||||
alt="Discord logo"
|
||||
className="sb-explore-image"
|
||||
/>
|
||||
<div>
|
||||
Get support and chat with frontend developers.
|
||||
|
||||
<a
|
||||
href="https://discord.gg/storybook"
|
||||
target="_blank"
|
||||
>Join Discord server<RightArrow /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sb-section-item">
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
layout="fixed"
|
||||
src={Youtube}
|
||||
alt="Youtube logo"
|
||||
className="sb-explore-image"
|
||||
/>
|
||||
<div>
|
||||
Watch tutorials, feature previews and interviews.
|
||||
|
||||
<a
|
||||
href="https://www.youtube.com/@chromaticui"
|
||||
target="_blank"
|
||||
>Watch on YouTube<RightArrow /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sb-section-item">
|
||||
<Image
|
||||
width={33}
|
||||
height={32}
|
||||
layout="fixed"
|
||||
src={Tutorials}
|
||||
alt="A book"
|
||||
className="sb-explore-image"
|
||||
/>
|
||||
<p>Follow guided walkthroughs on for key workflows.</p>
|
||||
|
||||
<a
|
||||
href="https://storybook.js.org/tutorials/"
|
||||
target="_blank"
|
||||
>Discover tutorials<RightArrow /></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
{`
|
||||
.sb-container {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.sb-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.sb-section-title {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.sb-section a:not(h1 a, h2 a, h3 a) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sb-section-item, .sb-grid-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sb-section-item-heading {
|
||||
padding-top: 20px !important;
|
||||
padding-bottom: 5px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.sb-section-item-paragraph {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.sb-chevron {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.sb-features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 32px 20px;
|
||||
}
|
||||
|
||||
.sb-socials {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.sb-socials p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sb-explore-image {
|
||||
max-height: 32px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.sb-addon {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-color: #EEF3F8;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
background: #EEF3F8;
|
||||
height: 180px;
|
||||
margin-bottom: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sb-addon-text {
|
||||
padding-left: 48px;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.sb-addon-text h4 {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.sb-addon-img {
|
||||
position: absolute;
|
||||
left: 345px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 200%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sb-addon-img img {
|
||||
width: 650px;
|
||||
transform: rotate(-15deg);
|
||||
margin-left: 40px;
|
||||
margin-top: -72px;
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.sb-addon-img {
|
||||
left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.sb-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sb-features-grid {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.sb-socials {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.sb-addon {
|
||||
height: 280px;
|
||||
align-items: flex-start;
|
||||
padding-top: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sb-addon-text {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.sb-addon-img {
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 130px;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
width: 124%;
|
||||
}
|
||||
|
||||
.sb-addon-img img {
|
||||
width: 1200px;
|
||||
transform: rotate(-12deg);
|
||||
margin-left: 0;
|
||||
margin-top: 48px;
|
||||
margin-bottom: -40px;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
BIN
stories/assets/accessibility.png
Normal file
After Width: | Height: | Size: 41 KiB |
1
stories/assets/accessibility.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48"><title>Accessibility</title><circle cx="24.334" cy="24" r="24" fill="#A849FF" fill-opacity=".3"/><path fill="#A470D5" fill-rule="evenodd" d="M27.8609 11.585C27.8609 9.59506 26.2497 7.99023 24.2519 7.99023C22.254 7.99023 20.6429 9.65925 20.6429 11.585C20.6429 13.575 22.254 15.1799 24.2519 15.1799C26.2497 15.1799 27.8609 13.575 27.8609 11.585ZM21.8922 22.6473C21.8467 23.9096 21.7901 25.4788 21.5897 26.2771C20.9853 29.0462 17.7348 36.3314 17.3325 37.2275C17.1891 37.4923 17.1077 37.7955 17.1077 38.1178C17.1077 39.1519 17.946 39.9902 18.9802 39.9902C19.6587 39.9902 20.253 39.6293 20.5814 39.0889L20.6429 38.9874L24.2841 31.22C24.2841 31.22 27.5529 37.9214 27.9238 38.6591C28.2948 39.3967 28.8709 39.9902 29.7168 39.9902C30.751 39.9902 31.5893 39.1519 31.5893 38.1178C31.5893 37.7951 31.3639 37.2265 31.3639 37.2265C30.9581 36.3258 27.698 29.0452 27.0938 26.2771C26.8975 25.4948 26.847 23.9722 26.8056 22.7236C26.7927 22.333 26.7806 21.9693 26.7653 21.6634C26.7008 21.214 27.0231 20.8289 27.4097 20.7005L35.3366 18.3253C36.3033 18.0685 36.8834 16.9773 36.6256 16.0144C36.3678 15.0515 35.2722 14.4737 34.3055 14.7305C34.3055 14.7305 26.8619 17.1057 24.2841 17.1057C21.7062 17.1057 14.456 14.7947 14.456 14.7947C13.4893 14.5379 12.3937 14.9873 12.0715 15.9502C11.7493 16.9131 12.3293 18.0044 13.3604 18.3253L21.2873 20.7005C21.674 20.8289 21.9318 21.214 21.9318 21.6634C21.9174 21.9493 21.9053 22.2857 21.8922 22.6473Z" clip-rule="evenodd"/></svg>
|
After Width: | Height: | Size: 1.5 KiB |