Merge remote-tracking branch 'origin/main' into edit-guest-status
This commit is contained in:
commit
d25622d764
1
.github/workflows/playwright.yml
vendored
1
.github/workflows/playwright.yml
vendored
@ -9,6 +9,7 @@ concurrency:
|
||||
cancel-in-progress: true
|
||||
jobs:
|
||||
test:
|
||||
if: false
|
||||
timeout-minutes: 60
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
|
||||
@ -8,7 +8,6 @@ import { Group, Guest } from '@/app/lib/definitions';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
|
||||
import GroupsTable from '@/app/ui/groups/table';
|
||||
import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
|
||||
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
||||
import GuestsTable from '@/app/ui/guests/table';
|
||||
import { TabPanel, TabView } from 'primereact/tabview';
|
||||
@ -42,8 +41,6 @@ export default function Page() {
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<AffinityGroupsTree />
|
||||
|
||||
<TabView>
|
||||
<TabPanel header="Guests" leftIcon="pi pi-users mx-2">
|
||||
<div className="flex flex-col w-full items-center justify-between">
|
||||
30
app/[slug]/page.tsx
Normal file
30
app/[slug]/page.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'use client';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/app/ui/home.module.css';
|
||||
import LoginForm from '@/app/ui/components/login-form';
|
||||
|
||||
|
||||
|
||||
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
|
||||
|
||||
localStorage.setItem('slug', (await 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!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
36
app/api/authentication.tsx
Normal file
36
app/api/authentication.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||
import { User } from '@/app/lib/definitions';
|
||||
|
||||
export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
|
||||
console.log(email, password);
|
||||
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));
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { Expense } from '@/app/lib/definitions';
|
||||
import { getCsrfToken } from '@/app/lib/utils';
|
||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||
|
||||
export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
|
||||
fetch("/api/expenses")
|
||||
fetch(`/api/${getSlug()}/expenses`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
onLoad && onLoad(data.map((record: any) => {
|
||||
@ -21,7 +21,7 @@ export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
|
||||
}
|
||||
|
||||
export function updateExpense(expense: Expense) {
|
||||
fetch(`/api/expenses/${expense.id}`,
|
||||
fetch(`/api/${getSlug()}/expenses/${expense.id}`,
|
||||
{
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { Group } from '@/app/lib/definitions';
|
||||
import { getSlug } from '../lib/utils';
|
||||
|
||||
export function loadGroups(onLoad?: (groups: Group[]) => void) {
|
||||
fetch("/api/groups")
|
||||
fetch(`/api/${getSlug()}/groups`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
onLoad && onLoad(data.map((record: any) => {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { Guest } from '@/app/lib/definitions';
|
||||
import { getCsrfToken } from '@/app/lib/utils';
|
||||
import { getCsrfToken, getSlug } from '@/app/lib/utils';
|
||||
|
||||
export function loadGuests(onLoad?: (guests: Guest[]) => void) {
|
||||
fetch("/api/guests")
|
||||
fetch(`/api/${getSlug()}/guests`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
onLoad && onLoad(data.map((record: any) => {
|
||||
@ -22,7 +22,7 @@ export function loadGuests(onLoad?: (guests: Guest[]) => void) {
|
||||
};
|
||||
|
||||
export function updateGuest(guest: Guest) {
|
||||
return fetch(`/api/guests/${guest.id}`,
|
||||
return fetch(`/api/${getSlug()}/guests/${guest.id}`,
|
||||
{
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } }),
|
||||
@ -35,7 +35,7 @@ export function updateGuest(guest: Guest) {
|
||||
}
|
||||
|
||||
export function createGuest(guest: Guest, onCreate?: () => void) {
|
||||
fetch("/api/guests", {
|
||||
fetch(`/api/${getSlug()}/guests`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name: guest.name, group_id: guest.groupId, status: guest.status }),
|
||||
headers: {
|
||||
@ -51,7 +51,7 @@ export function createGuest(guest: Guest, onCreate?: () => void) {
|
||||
}
|
||||
|
||||
export function destroyGuest(guest: Guest, onDestroy?: () => void) {
|
||||
fetch(`/api/guests/${guest.id}`, {
|
||||
fetch(`/api/${getSlug()}/guests/${guest.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
import { TableArrangement } from '@/app/lib/definitions';
|
||||
import { getSlug } from '../lib/utils';
|
||||
|
||||
export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
|
||||
fetch('/api/tables_arrangements')
|
||||
fetch(`/api/${getSlug()}/tables_arrangements`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
onLoad && onLoad(data.map((record: any) => {
|
||||
|
||||
@ -4,19 +4,6 @@
|
||||
// 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;
|
||||
password: string;
|
||||
};
|
||||
|
||||
export type Customer = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
image_url: string;
|
||||
};
|
||||
|
||||
export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
|
||||
export type GuestStatus = typeof guestStatuses[number];
|
||||
@ -63,34 +50,6 @@ export type AttendanceSummary = {
|
||||
total: 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;
|
||||
@ -102,34 +61,7 @@ export type guestsTable = {
|
||||
status: 'pending' | 'paid';
|
||||
};
|
||||
|
||||
export type CustomersTableType = {
|
||||
export type User = {
|
||||
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,149 +0,0 @@
|
||||
/* 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,14 +1,5 @@
|
||||
/* 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
|
||||
.split("; ")
|
||||
@ -16,68 +7,4 @@ export const getCsrfToken = () => {
|
||||
?.split("=")[1] || 'unknown';
|
||||
}
|
||||
|
||||
// From https://stackoverflow.com/a/1026087/3607039
|
||||
export const capitalize = (val:string) => {
|
||||
return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
||||
}
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
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,
|
||||
];
|
||||
};
|
||||
export const getSlug = () => localStorage.getItem('slug') || 'default';
|
||||
|
||||
12
app/page.tsx
12
app/page.tsx
@ -1,12 +0,0 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@ -1,124 +0,0 @@
|
||||
/* 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 });
|
||||
// }
|
||||
}
|
||||
51
app/ui/components/login-form.tsx
Normal file
51
app/ui/components/login-form.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'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 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(`${getSlug()}/dashboard`)
|
||||
}
|
||||
})}>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,125 +0,0 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
/* 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,66 +0,0 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@ -10,13 +10,14 @@ import {
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import clsx from 'clsx';
|
||||
import { getSlug } from '@/app/lib/utils';
|
||||
|
||||
// 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 },
|
||||
{ name: 'Guests', href: `/${getSlug()}/dashboard/guests`, icon: UserGroupIcon },
|
||||
{ name: 'Expenses', href: `/${getSlug()}/dashboard/expenses`, icon: BanknotesIcon },
|
||||
{ name: 'Table distributions', href: `/${getSlug()}/dashboard/tables`, icon: RectangleGroupIcon },
|
||||
];
|
||||
|
||||
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
/* 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,30 +1,46 @@
|
||||
/* Copyright (C) 2024 Manuel Bustillo*/
|
||||
|
||||
'use client';
|
||||
|
||||
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';
|
||||
|
||||
export default function SideNav() {
|
||||
const router = useRouter();
|
||||
|
||||
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="/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>
|
||||
<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>
|
||||
<span>Logged in as {JSON.parse(localStorage.getItem('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(`/${getSlug()}`);
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PowerIcon className="w-6" />
|
||||
<div className="hidden md:block">Sign Out</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
/* 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>
|
||||
)
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
/* 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,114 +0,0 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@ -1,125 +0,0 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@ -1,121 +0,0 @@
|
||||
/* 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,31 +0,0 @@
|
||||
/* 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,69 +0,0 @@
|
||||
/* 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>
|
||||
);
|
||||
}
|
||||
@ -19,19 +19,19 @@
|
||||
"react": "19.0.0-rc-f38c22b244-20240704",
|
||||
"react-dom": "19.0.0-rc-f38c22b244-20240704",
|
||||
"tailwindcss": "3.4.15",
|
||||
"typescript": "5.6.3",
|
||||
"typescript": "5.7.2",
|
||||
"use-debounce": "^10.0.1",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.46.0",
|
||||
"@types/bcrypt": "^5.0.2",
|
||||
"@types/node": "22.9.0",
|
||||
"@types/node": "22.10.1",
|
||||
"@types/react": "18.3.12",
|
||||
"@types/react-dom": "18.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=23.0.0"
|
||||
},
|
||||
"packageManager": "pnpm@9.13.2+sha512.88c9c3864450350e65a33587ab801acf946d7c814ed1134da4a924f6df5a2120fd36b46aab68f7cd1d413149112d53c7db3a4136624cfd00ff1846a0c6cef48a"
|
||||
"packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
|
||||
}
|
||||
|
||||
94
pnpm-lock.yaml
generated
94
pnpm-lock.yaml
generated
@ -10,7 +10,7 @@ importers:
|
||||
dependencies:
|
||||
'@heroicons/react':
|
||||
specifier: ^2.1.4
|
||||
version: 2.1.5(react@19.0.0-rc-f38c22b244-20240704)
|
||||
version: 2.2.0(react@19.0.0-rc-f38c22b244-20240704)
|
||||
'@tailwindcss/forms':
|
||||
specifier: ^0.5.7
|
||||
version: 0.5.9(tailwindcss@3.4.15)
|
||||
@ -25,10 +25,10 @@ importers:
|
||||
version: 2.1.1
|
||||
next:
|
||||
specifier: 15.0.3
|
||||
version: 15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
|
||||
version: 15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
|
||||
next-auth:
|
||||
specifier: 5.0.0-beta.25
|
||||
version: 5.0.0-beta.25(next@15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
|
||||
version: 5.0.0-beta.25(next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
|
||||
postcss:
|
||||
specifier: 8.4.49
|
||||
version: 8.4.49
|
||||
@ -37,7 +37,7 @@ importers:
|
||||
version: 7.0.0
|
||||
primereact:
|
||||
specifier: ^10.8.2
|
||||
version: 10.8.4(@types/react@18.3.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
|
||||
version: 10.8.5(@types/react@18.3.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
|
||||
react:
|
||||
specifier: 19.0.0-rc-f38c22b244-20240704
|
||||
version: 19.0.0-rc-f38c22b244-20240704
|
||||
@ -48,8 +48,8 @@ importers:
|
||||
specifier: 3.4.15
|
||||
version: 3.4.15
|
||||
typescript:
|
||||
specifier: 5.6.3
|
||||
version: 5.6.3
|
||||
specifier: 5.7.2
|
||||
version: 5.7.2
|
||||
use-debounce:
|
||||
specifier: ^10.0.1
|
||||
version: 10.0.4(react@19.0.0-rc-f38c22b244-20240704)
|
||||
@ -59,13 +59,13 @@ importers:
|
||||
devDependencies:
|
||||
'@playwright/test':
|
||||
specifier: ^1.46.0
|
||||
version: 1.48.2
|
||||
version: 1.49.0
|
||||
'@types/bcrypt':
|
||||
specifier: ^5.0.2
|
||||
version: 5.0.2
|
||||
'@types/node':
|
||||
specifier: 22.9.0
|
||||
version: 22.9.0
|
||||
specifier: 22.10.1
|
||||
version: 22.10.1
|
||||
'@types/react':
|
||||
specifier: 18.3.12
|
||||
version: 18.3.12
|
||||
@ -93,17 +93,17 @@ packages:
|
||||
nodemailer:
|
||||
optional: true
|
||||
|
||||
'@babel/runtime@7.25.7':
|
||||
resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==}
|
||||
'@babel/runtime@7.26.0':
|
||||
resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
||||
'@emnapi/runtime@1.2.0':
|
||||
resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
|
||||
|
||||
'@heroicons/react@2.1.5':
|
||||
resolution: {integrity: sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==}
|
||||
'@heroicons/react@2.2.0':
|
||||
resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
|
||||
peerDependencies:
|
||||
react: '>= 16'
|
||||
react: '>= 16 || ^19.0.0-rc'
|
||||
|
||||
'@img/sharp-darwin-arm64@0.33.5':
|
||||
resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
|
||||
@ -306,8 +306,8 @@ packages:
|
||||
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
|
||||
engines: {node: '>=14'}
|
||||
|
||||
'@playwright/test@1.48.2':
|
||||
resolution: {integrity: sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==}
|
||||
'@playwright/test@1.49.0':
|
||||
resolution: {integrity: sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
@ -328,8 +328,8 @@ packages:
|
||||
'@types/cookie@0.6.0':
|
||||
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
|
||||
|
||||
'@types/node@22.9.0':
|
||||
resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==}
|
||||
'@types/node@22.10.1':
|
||||
resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==}
|
||||
|
||||
'@types/prop-types@15.7.12':
|
||||
resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
|
||||
@ -839,13 +839,13 @@ packages:
|
||||
resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
|
||||
engines: {node: '>= 6'}
|
||||
|
||||
playwright-core@1.48.2:
|
||||
resolution: {integrity: sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==}
|
||||
playwright-core@1.49.0:
|
||||
resolution: {integrity: sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
playwright@1.48.2:
|
||||
resolution: {integrity: sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==}
|
||||
playwright@1.49.0:
|
||||
resolution: {integrity: sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
@ -908,8 +908,8 @@ packages:
|
||||
primeicons@7.0.0:
|
||||
resolution: {integrity: sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==}
|
||||
|
||||
primereact@10.8.4:
|
||||
resolution: {integrity: sha512-jwkSzq6pOHayzEh+9dgk2M71gEZtoQakwPKVo3FUJO3eEX3SoAOchON+Xm1tGCNqtd66ca8RgOWQcpv3AQoMvg==}
|
||||
primereact@10.8.5:
|
||||
resolution: {integrity: sha512-B1LeJdNGGAB8P1VRJE0TDYz6rZSDwxE7Ft8PLFjRYLO44+mIJNDsLYSB56LRJOoqUNRhQrRIe/5ctS5eyQAzwQ==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
peerDependencies:
|
||||
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
@ -1096,13 +1096,13 @@ packages:
|
||||
tslib@2.6.3:
|
||||
resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
|
||||
|
||||
typescript@5.6.3:
|
||||
resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
|
||||
typescript@5.7.2:
|
||||
resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==}
|
||||
engines: {node: '>=14.17'}
|
||||
hasBin: true
|
||||
|
||||
undici-types@6.19.8:
|
||||
resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
|
||||
undici-types@6.20.0:
|
||||
resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
|
||||
|
||||
update-browserslist-db@1.1.0:
|
||||
resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
|
||||
@ -1169,7 +1169,7 @@ snapshots:
|
||||
preact: 10.11.3
|
||||
preact-render-to-string: 5.2.3(preact@10.11.3)
|
||||
|
||||
'@babel/runtime@7.25.7':
|
||||
'@babel/runtime@7.26.0':
|
||||
dependencies:
|
||||
regenerator-runtime: 0.14.1
|
||||
|
||||
@ -1178,7 +1178,7 @@ snapshots:
|
||||
tslib: 2.6.3
|
||||
optional: true
|
||||
|
||||
'@heroicons/react@2.1.5(react@19.0.0-rc-f38c22b244-20240704)':
|
||||
'@heroicons/react@2.2.0(react@19.0.0-rc-f38c22b244-20240704)':
|
||||
dependencies:
|
||||
react: 19.0.0-rc-f38c22b244-20240704
|
||||
|
||||
@ -1341,9 +1341,9 @@ snapshots:
|
||||
'@pkgjs/parseargs@0.11.0':
|
||||
optional: true
|
||||
|
||||
'@playwright/test@1.48.2':
|
||||
'@playwright/test@1.49.0':
|
||||
dependencies:
|
||||
playwright: 1.48.2
|
||||
playwright: 1.49.0
|
||||
|
||||
'@swc/counter@0.1.3': {}
|
||||
|
||||
@ -1358,13 +1358,13 @@ snapshots:
|
||||
|
||||
'@types/bcrypt@5.0.2':
|
||||
dependencies:
|
||||
'@types/node': 22.9.0
|
||||
'@types/node': 22.10.1
|
||||
|
||||
'@types/cookie@0.6.0': {}
|
||||
|
||||
'@types/node@22.9.0':
|
||||
'@types/node@22.10.1':
|
||||
dependencies:
|
||||
undici-types: 6.19.8
|
||||
undici-types: 6.20.0
|
||||
|
||||
'@types/prop-types@15.7.12': {}
|
||||
|
||||
@ -1535,7 +1535,7 @@ snapshots:
|
||||
|
||||
dom-helpers@5.2.1:
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.7
|
||||
'@babel/runtime': 7.26.0
|
||||
csstype: 3.1.3
|
||||
|
||||
eastasianwidth@0.2.0: {}
|
||||
@ -1735,13 +1735,13 @@ snapshots:
|
||||
|
||||
nanoid@3.3.7: {}
|
||||
|
||||
next-auth@5.0.0-beta.25(next@15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
|
||||
next-auth@5.0.0-beta.25(next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
|
||||
dependencies:
|
||||
'@auth/core': 0.37.2
|
||||
next: 15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
|
||||
next: 15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
|
||||
react: 19.0.0-rc-f38c22b244-20240704
|
||||
|
||||
next@15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
|
||||
next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
|
||||
dependencies:
|
||||
'@next/env': 15.0.3
|
||||
'@swc/counter': 0.1.3
|
||||
@ -1761,7 +1761,7 @@ snapshots:
|
||||
'@next/swc-linux-x64-musl': 15.0.3
|
||||
'@next/swc-win32-arm64-msvc': 15.0.3
|
||||
'@next/swc-win32-x64-msvc': 15.0.3
|
||||
'@playwright/test': 1.48.2
|
||||
'@playwright/test': 1.49.0
|
||||
sharp: 0.33.5
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
@ -1821,11 +1821,11 @@ snapshots:
|
||||
|
||||
pirates@4.0.6: {}
|
||||
|
||||
playwright-core@1.48.2: {}
|
||||
playwright-core@1.49.0: {}
|
||||
|
||||
playwright@1.48.2:
|
||||
playwright@1.49.0:
|
||||
dependencies:
|
||||
playwright-core: 1.48.2
|
||||
playwright-core: 1.49.0
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
|
||||
@ -1883,7 +1883,7 @@ snapshots:
|
||||
|
||||
primeicons@7.0.0: {}
|
||||
|
||||
primereact@10.8.4(@types/react@18.3.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
|
||||
primereact@10.8.5(@types/react@18.3.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
|
||||
dependencies:
|
||||
'@types/react-transition-group': 4.4.11
|
||||
react: 19.0.0-rc-f38c22b244-20240704
|
||||
@ -1909,7 +1909,7 @@ snapshots:
|
||||
|
||||
react-transition-group@4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.7
|
||||
'@babel/runtime': 7.26.0
|
||||
dom-helpers: 5.2.1
|
||||
loose-envify: 1.4.0
|
||||
prop-types: 15.8.1
|
||||
@ -2104,9 +2104,9 @@ snapshots:
|
||||
|
||||
tslib@2.6.3: {}
|
||||
|
||||
typescript@5.6.3: {}
|
||||
typescript@5.7.2: {}
|
||||
|
||||
undici-types@6.19.8: {}
|
||||
undici-types@6.20.0: {}
|
||||
|
||||
update-browserslist-db@1.1.0(browserslist@4.23.3):
|
||||
dependencies:
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1019 B |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
@ -1,7 +1,7 @@
|
||||
import { test, expect, Page } from '@playwright/test'
|
||||
|
||||
const mockGuestsAPI = ({ page }: { page: Page }) => {
|
||||
page.route('*/**/api/guests', async route => {
|
||||
page.route('*/**/api/default/guests', async route => {
|
||||
const json = [
|
||||
{
|
||||
"id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
|
||||
@ -28,7 +28,7 @@ const mockGuestsAPI = ({ page }: { page: Page }) => {
|
||||
}
|
||||
|
||||
const mockGroupsAPI = ({ page }: { page: Page }) => {
|
||||
page.route('*/**/api/groups', async route => {
|
||||
page.route('*/**/api/default/groups', async route => {
|
||||
const json = [
|
||||
{
|
||||
"id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
|
||||
@ -65,7 +65,7 @@ const mockGroupsAPI = ({ page }: { page: Page }) => {
|
||||
test('should display the list of guests', async ({ page }) => {
|
||||
await mockGuestsAPI({ page });
|
||||
|
||||
await page.goto('/dashboard/guests');
|
||||
await page.goto('/default/dashboard/guests');
|
||||
|
||||
await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
|
||||
await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
|
||||
@ -90,7 +90,7 @@ test('should display the list of guests', async ({ page }) => {
|
||||
test('should display the list of groups', async ({ page }) => {
|
||||
await mockGroupsAPI({ page });
|
||||
|
||||
await page.goto('/dashboard/guests');
|
||||
await page.goto('/default/dashboard/guests');
|
||||
await page.getByRole('tab', { name: 'Groups' }).click();
|
||||
|
||||
await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user