iegorov / e-reception Goto Github PK

Story description

Subtasks:

• Subtask 1
• Subtask 2

Design mockups:
Link to the mockup

Acceptance criteria:

• Criteria 1
• Criteria 2

Linked issues:

• is blocked by [IssueRef]

Use this guide to import existing repository to a Vercel project:
https://vercel.com/docs/getting-started-with-vercel/import

Here are the details for Next.js deployment on Vercel:
https://vercel.com/docs/frameworks/nextjs

Use npx create-next-app@latest to create an empty default project and push in into master branch in a repository.

https://nextjs.org/docs/getting-started/installation

Allow users to filter visitors' data in a table

Stories:

• #12
• #13

Implement /visitors page with basic layout, title & subtitle.

Subtasks:

• Add a layout.tsx to be used for all pages. See https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
• Add a global layout header with 3 navigation links Appointments, Visitors, Settings. See example: https://github.com/shadcn-ui/ui/blob/main/apps/www/components/main-nav.tsx
• Add a new page /visitors
• Add Visitors page header with title and subtitle

Design mockup:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=211%3A5112&mode=design&t=TF2rkxhfKdGBkSQ0-1

Acceptance criteria:

• User can open Visitors page via /visitors path in browser
• User can open Visitors page via Visitors link in global header
• User can see title and subtitle on Visitors page

Story description

Subtasks:

• Subtask 1
• Subtask 2

Design mockups:
Link to the mockup

Acceptance criteria:

• Criteria 1
• Criteria 2

Linked issues:

• is blocked by [IssueRef]

Introduce a client-side solution to paginate data in the Visitors table

Subtasks:

• Introduce pagination component under the table on the Visitors page.
• Display only 10 items per page.
• Allow user to change pages by clicking buttons.

Design mockups:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=211%3A5112&mode=design&t=TF2rkxhfKdGBkSQ0-1

Acceptance criteria:

• User is able to see visitors table data by 10 on a page
• User is able to navigate to the next page
• User is able to navigate to the previous page
• User is able to navigate to the first page
• User is able to navigate to the last page
• First page button is disabled when user is on a first page
• Previous page button is disabled when user is on a first page
• Last page button is disabled when user is on a last page
• Next page button is disabled when user is on a last page

Linked issues:

• is blocked by #7

What we should have as a README:

• short description
• List of notable dependencies:
  • Technology stack: language, frameworks, component libraries
  • Services and tools: what we use to deploy, lint, test etc.
• How to install everything: npm ci for example.
• Configuration. Env variables, tools configs etc.
• Usage: how to run project in a dev mode, how to build it for production
• Tests: how to run Unit & e2e tests
• Linting: what we use, notable configuration details, how to run lint for a project or part of it
• Contributing: code style used, commit messages guideline etc

Story description

Subtasks:

• Subtask 1
• Subtask 2

Design mockups:
Link to the mockup

Acceptance criteria:

• Criteria 1
• Criteria 2

Linked issues:

• is blocked by [IssueRef]

Allow User to save data from new Visitor form to a database.

Subtasks:

• Introduce POST /api/visitors endpoint to handle the data submission
• Validate incoming data according to the Visitor model
• Save new Visitor to the database in /api/visitors handler
• When Visitor is added successfully show a toast with text New visitor has been added successfully
• When Visitor is added successfully reload the visitors table

Design mockups:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=220-2306&mode=design&t=bmw5VOuY1nKigXrB-0

Acceptance criteria:

• When user fills new Visitor form and clicks Add button, the data is saved in a database
• When visitor is added successfully a toast with the text New visitor has been added successfully is shown
• When Visitor is added successfully the visitors table is reloaded and new visitor's data is in the first row

Linked issues:

• is blocked by #18

Story description

Subtasks:

• Subtask 1
• Subtask 2

Design mockups:
Link to the mockup

Acceptance criteria:

• Criteria 1
• Criteria 2

Linked issues:

• is blocked by [IssueRef]

Introduce a solution to load data from PostgreSQL database into Visitors table

Subtasks:

• Introduce Prisma library. See this guide for reference: https://vercel.com/guides/nextjs-prisma-postgres
• Define Prisma model for Visitor
• Add GET /api/visitors endpoint to get the data from Postgres. See this guide for reference: https://nextjs.org/docs/app/building-your-application/routing/route-handlers
• Update table component to use the new data endpoint
• Seed some data to the database

Acceptance criteria:

• User is able to see all visitors' data from the database in the Visitors table

Linked issues:

• is blocked by #7

Introduce a /visitors page with a table containing the visitors data.

Stories:

• #6
• #7
• #8
• #9
• Change page size
• Change column visibility
• Select items in a table

Story description

Subtasks:

• Subtask 1
• Subtask 2

Design mockups:
Link to the mockup

Acceptance criteria:

• Criteria 1
• Criteria 2

Linked issues:

• is blocked by [IssueRef]

Добавить вкладку настроек с формой для управления уведомлениями доступную по url /settings/notifications/

Subtasks:

• добавить вкладку в UI
• добавить страницу с URL /settings/notifications/
• добавить поле включения/выключения уведомлений. По-умолчанию выключено.
• добавить поле выбора интервала уведомлений. Допустимые значение: 15мин, 30мин, 1час. По-умолчанию: 15мин.
• блокировать поле выбора интервала, если уведомления выключены

Design mockups:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=220-11198&mode=design&t=lmp3mOYuOwlhBTfS-0

Acceptance criteria:

• Можно открыть вкладку через UI
• Можно открыть вкладку через url /settings/notifications/
• Пользователь видит форму с полем включения/выключения
• Пользователь видит форму с полем выбора интервалом уведомления
• Поле включения/выключения по-умолчанию выключено
• Если поле включения выключено, то поле выбора интервала заблокировано
• Поле выбора интервала содержит варианты за 15мин, 30мин, 1час
• Поле выбора интервала по-умолчанию содержит значение за 15мин.

Linked issues:

• is blocked by #25

Introduce a client-side full-text filtering of visitors data by birth date.

Subtasks:

• adjust global filter for the table to include Birth date column
• Introduce a filter for the Birth date column based on string representation of a date., i.e. with filter value '09' a date rendered as '01.09.1956' should be found.

Design mockups:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=223-14468&mode=design&t=gu5Fp6eXfZICLEn7-0

Acceptance criteria:

• User is able to filter visitors table data by birth date

Linked issues:

• is blocked by #12

https://ui.shadcn.com/docs/installation/next

Introduce a new Visitor page with a form and client-side validation

Subtasks:

• Add a new page /visitors/new
• Add page header with title and subtitle according to the mockup
• Introduce Add & Cancel buttons. When User click Cancel button, navigate to /visitors page.
• Introduce a form with fields: First name, Middle name, Last name, Email, Phone, Address
• Make these fields required: First name, Last name, Email, Address
• Add email validation for the field Email
• Allow only numbers and symbols +-():# in the Phone field
• Show validation errors when user clicks Add button

Design mockups:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=220-2306&mode=design&t=bmw5VOuY1nKigXrB-0

Acceptance criteria:

• User can open Add new Visitor page via /visitors/new path in browser
• User can open Add new Visitor page via Add visitor button on Visitors page
• User can see title and subtitle on Add new Visitor page
• User can see a form with fields: First name, Middle name, Last name, Email, Phone, Address
• Fields First name, Last name, Email, Address are required
• Field Email allows only valid email addresses
• Phone field accepts only numbers and symbols +-():#
• When User clicks Cancel button /visitors page is opened
• When User clicks Add button and form has validation errors the corresponding fields are highlighted in red and error messages are visible to the User

Allow User to delete a single visitor from Visitors table via the actions context menu.

Subtasks:

• Introduce a context menu to the visitors table as a last column if it is not already present
• Add Delete item to the context menu
• Introduce confirmation dialog according to the mockup
• Show full name of visitor to delete in the confirmation dialog
• Introduce DELETE /api/visitors/:visitorId route
• Introduce logic to delete visitor from a database
• Refresh visitors table after visitor is successfully deleted
• Show a toast with a text Visitor has been deleted successfully after visitor is successfully deleted

Design mockups:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=223-12297&mode=design&t=gu5Fp6eXfZICLEn7-0
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=223-13875&mode=design&t=gu5Fp6eXfZICLEn7-0

Acceptance criteria:

• User is able to open a context menu with item Delete in it
• When User clicks Delete context menu item, it opens a confirmation dialog
• When confirmation dialog opens, it contain the full name of selected visitor.
• When User clicks Cancel in confirmation dialog, it closes and visitor is NOT deleted
• When User clicks Yes, delete visitor button, confirmation dialog closes and visitor is deleted
• When visitor is deleted, visitors table data refreshes
• When visitor is deleted a toast is show with a text Visitor has been deleted successfully

Linked issues:

• is blocked by #7

Introduce visitors table on Visitors page.

Subtasks:

• Implement a table component with 5 columns: Name, Birth date, Email, Phone, Address. See this guide for reference: https://ui.shadcn.com/docs/components/data-table#introduction
  You may also find this implementation useful: https://github.com/shadcn-ui/ui/tree/main/apps/www/app/examples/tasks
• Define a web app Visitor model with zod. See this file for example: https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/tasks/data/schema.ts
  I assume there will be fields like: id, firstName, middleName, lastName, birthDate, email, phone, address.
• Provide some mock visitors data
• Text No data. should be present if there is no data available for display.

Design mockups:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=211%3A5112&mode=design&t=TF2rkxhfKdGBkSQ0-1
Empty view: https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=223%3A14135&mode=design&t=TF2rkxhfKdGBkSQ0-1

Acceptance criteria:

• User is able to see a table with columns Name, Birth date, Email, Phone, Address
• When there is no data available text No data. is present.

Linked issues:

• is blocked by #6

Introduce a client-side full-text filtering of visitors data by First name, Last name, Middle name, phone, email or address fields.

Subtasks:

• Introduce search input above the table
• Filter visitors dataset in a table case-insensitive by the data in Full name, Email, Phone & Address columns.
• Allow user to clear the search input via the Reset X button. Button should be visible only when there is a value in the search field.
• When there is no data found render text No results.

Design mockups:
https://www.figma.com/file/wiQu66c3xgh3WznbXA9jCU/E-Reception-mockups?type=design&node-id=223-14468&mode=design&t=gu5Fp6eXfZICLEn7-0

Acceptance criteria:

• User is able to filter visitors table data by First Name case-insensitive
• User is able to filter visitors table data by Last Name case-insensitive
• User is able to filter visitors table data by Middle Name case-insensitive
• User is able to filter visitors table data by Phone
• User is able to filter visitors table data by Email case-insensitive
• User is able to filter visitors table data by Address case-insensitive
• User is able to clear search field
• Clear search field button is present only when there is a value in the search field
• When search field has a value and no data has been found, User is able to see No results. text

Linked issues:

• is blocked by #7