Web Program Development #2

In the Visual Studio code, open a new terminal and enter the run command

npm run dev 

Run it and you should be able to see it in your browser.

Web Sales Inventory Program

Statement of requirements

-Log in.
-Register a customer.
-Register an item.
-Enter a slip.
-Print a transaction statement.
-Print a daily report.
-Configure preferences.

UI Design

First line: Basic information and frequently used buttons
Top 1st row: Generalized menu area
Top 2nd row: Detailed menu area
Bottom: Main screen

Database Design

USER : User information
User ID, Username, Rank, Email address, Phone number, Cell phone number, Business number

CUSTOM : Customer information
Customer number, customer name, business number, sales category, representative name, address, phone number, fax number, cell phone number, industry, type, notes, email address, contact name, contact cell phone number, transaction balance

ITEM : Item information
Item number, item name, size, unit, classification, inventory, selling price, wholesale price, receiving price, notes, used status

JANGBU : Transaction details
Serial number, internal code, date entered, vendor number, item number, quantity, unit price, supply price, VAT, notes, reference

Using shadcn-ui

Homepage: https://ui.shadcn.com/

To configure the screen, we're going to use the shadcn-ui JavaScript project, which has received the most Github Stars for the year 2023.
It's a reusable component built using Radix UI and Tailwind CSS. It is not a component library, but a collection of reusable components that you can copy and paste into your app. This means that you don't need to install dependencies with npm install.
You can easily use components designed in shadcn by copying and pasting them.

Run the init command to set up the shadcn-ui project.

npx shadcn-ui@latest init 

Adding Components to Use

npx shadcn-ui@latest add button

Using with Components

Login screen

I wrote a brief requirements statement, DB design, and screen design.

The plan is to design a screen to be configured using shadcn/ui first.

A long way to go, but a thousand miles a day starts with one step

Thank you for reading my post. 😀

Sort:  

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.