ever-co / ever-gauzy Goto Github PK

I have no idea where Company selector went on Dashboard page?

For example:

As you can see there is "scrolling" at the right side and also the content of dropdown does not fit (because that block with "Income" header (page) does not use all available vertical space....

For now just simple dropdown with a single company name value in the site Header.
Note: we do NOT need auto-complete for companies because in most cases it will be just one or maximum few companies and dropdown will work great.

Note: add some fixed list of companies for now (hardcode) before we implement services / APIs / DB

We need to be able to quickly run the project using docker-compose up.

At the moment we are facing the following issues:

• only 7 empty tables created in docker PosgreSQL and it looks like some transactions just stuck, so no data seeded, etc. We need to analyze the reasons and fix that.

• Gauzy Angular webapp starts in docker, however, it looks like something broken with regards to proxy configuration. Request to http://localhost:8080/site (nginx) display error and requests to http://localhost:4200/api proxied to http://localhost:3000/api, however, result in errors. When running locally (without docker), proxy configs seem to be working correctly. Note: Gauzy api starts correctly in the docker and accessible from both http://localhost:3000/api and http://localhost:8080/api (means nginx working well for API)

Add notifications and loading indicators everywhere in the application. There's already "angular2-toaster": "^7.0.0" in package.json.

Settings page should include "Danger Zone".

• One of the buttons in the Danger Zone should be to clean up DB from all fake records (asking for Confirmation and asking the user to enter something like "REMOVE ALL DATA" in the text box to be 100% sure she/he understands what's going on)

On Employees Management page, we have "Bonus" column, but for clarity, we should display month / year of the bonus below, like this:

|    Bonus   | 
|  July 2019 | 

Center text in the header and center bonus values in the rows.

In addition, please remove "Search" in the Bonus column, it does not make any sense :)

Due to a bug in TS microsoft/TypeScript#29112, we get the following error:

ERROR in undefined(undefined,undefined):
TS2321: Excessive stack depth comparing types 'any' and 'FindConditions<T>'.
Version: typescript 3.4.5

Not sure how it affects anything (but probably best we can do is to wait till it gets fixed)

For individual employee (when someone selected), on Dashboard page (http://localhost:4200/#/pages/dashboard), where we show Total Gross Revenue, Total Expenses, Profit and Bonus value, let's add simple chart (at the right side of the page) which will show previous 12 months bonus values (e.g. as bar charts, one bar is one month, totally 12 bars).

Also below (or above) chart, we can show "Average Bonus" value which will be sum of bonus values over last 12 month divided by 12 (please round it to lower integer value)

Reason for such Chart? It's always nice to see how bonus changes over time for a given employee.

Make sure information for chart loaded as separate request and best if it will contain parameters like "startDate" and "endDate" so we can make the chart more flexible in the future (e.g. request for 3 years period, etc).

Please work with Milena about design, but make sure you show to her charts available in ngx-admin, we don't want to design our own chart for that ;)

Admins should be able to see a full report about each employee on Dashboard page v0.1: total expenses for the selected employee (one text value, large), total revenue for the selected employee (one text value, large), CIR value from the employee (one text value, large), and should see it for every selected month (using a selector in the site header with months/years to quickly switch, by default always use “current” month, which is previous full month in such selector).

For v0.1, if month/year not select let's make Dashboard to show nothing (and display "Select Period" message in the center of page). Same we should do if no Employee selected in v0.1

For Employees, Dashboard should report (for selected month/year) following details:

• total gross revenue (click on it should open page or popup with all revenue transactions, i.e. with all income generated by employee work over a month)
• total expenses (the same click should open page or popup with all expenses related to employee work)
• the calculated difference between gross revenue and expenses
• Bonus value (25% from difference above)

Think that page is completely broken now...

1. Look into "Month Settings" text and button "+ Add" position and how it gets into control for an edit of setting... I think both should be in one separate line, above records...

2. There is tons of space between "Salary" / "July" and "2019" and even more with BGN522.00 value. For sure we want to display "July" together with "2019" like a single date: "July 2019"

3. Without Header, it's not clear what is "Salary", it looks weird. I.e. I would prefer to have above something like "Setting Name". Same as value BG522.00 looks also without content what is it, I would prefer to have a header for it "Setting Value" (i.e. try to put header above rows of data and below "Month Settings +Add" line). Note: header text could be extremely small, but I think it should be visible! To avoid feeling that you don't understand what that page records showing...

4. I think click on button "Edit" should change that button to "Save Edit" (to accept changes) and we need to allow edit inside the control, without popup, same as feature "+Add" should also be without any popup (at least that's what I understand from page design by @mila-hunt

5. More issues happen if you try to enter multiple settings... they all got displayed in the single line!

6. Icon to "close" record is NOT clear on Web site, we need to add text to it, e.g. like
   ->] Close (make both icon and text clickable).

7. Let's rename "Month Settings" to "Recurring Monthly Expenses" (it better represents what this page about)

Admin can set each employee base salary and taxes value (taxes from salary) in a specific selected month/year on individual Employee management page available ONLY to Admin users.

It’s critically important that except that specific employee, nobody else ever see that salary value and taxes value (except employee himself).

This means that some settings for Employees should per different each month, e.g table like:

EmployeeID | Month | Year | SettingType | Value.

We can hardcode two SettingTypes, e.g. “Salary” and “SalaryTaxes” to be used in the DB initially.

I would suggest just to make employee settings page to always display (and edit) currently selected month settings in some Tab on Employee page.

So it will be UI like this (few tabs):

• the first tab with global details like Employee Name, Email, Avatar (picture), etc
• and second tab “Month Settings” which will display values for selected month (switch to a different month in site header will display settings for different Month), In most simple, MVP case, it will be just two values “Salary” and “Taxes from Salary”. Both such values later will be deducted to calculate employee net bonus, but they will NEVER be visible for others (except Admin and Employee himself just to verify these values for him)

Dropdown for Employees has element "Employees" inside, but it should be "All Employees" OR just empty element (so if I select empty element and close dropdown, then text / value in dropdown should be "All Employees")

Try to fix a bit more in "Dark" theme UI (many background colors are still white for inputs, etc!)
If it's too much work (can depend on Nebular / ngx-admin), do not waste time and keep ticket opened till we can solve it easily.

Add social logins/registration support:

• Google
• Microsoft
• LinkedIn
• Github
• Twitter
• Facebook
• Fiverr
• SSO

We also need the following third-party integrations, best done as "plugins":

• Casdoor
• Ory / Hydra and Kratos
• Zitadel
• SuperTokens
• AccountsJs (https://www.accountsjs.com). Can use the same TypeORM we already use etc.
• Keycloak. (see #1276)
• Auth0
• Supabase Auth
• FusionAuth
• Clerk
• Next Auth
• Descope
• Authentik
• Authelia

Note: we should have settings that enable/disable providers and social login buttons in UI. Best if we keep such settings stored in DB per Tenant.

We have a Wiki page https://github.com/ever-co/ever-gauzy/wiki/Authentication-&-Authorization-in-Gauzy

User - field name imageUrl
Organization - field name imageUrl
For both, we should set a default image URL generated from the first letter of their names (in case if data for this field is not provided).

At the moment, we have separate commands to seed DB with fake data.
However, we want to make the experience as simple as possible for the first run of the app.
So, on API start (using yarn start:api) we should check if no users exist in DB and seed DB automatically.

For employee settings, let's add field "StartedWork", which will be the date for when employee start working in the company (that may affect future bonus calculation). We need to have such a field in the new Employee creation page.

While running the project, any change in a .scss file causes it to recompile for 2 minutes or more.

Following languages should be supported for now:

• Russian
• Bulgarian
• Hebrew

• employees dropdown width is too large, it should be 200px max.
• date selector width is too large (select something like December, 2009 and you will see lots of free space), maybe something like 130px will be enough.
• company selector make 250px width or so.
• make sure header is "responsive" (e.g. if you decrease page width, all 3 selectors should be visible and probably should be stocked vertically. So it on mobile phone, we should see Logo, below it Employee dropdown, below it Date selector, below it Company Selector and below rest of the page content)
• there should be a bit larger padding between logos/avatars and names in each selector (now it's like 2 px, image and text are too close to each other)
• on "Dark" themes, some of the selectors (for Employee and for Company) are with white background, we need to check if it's easy to change it so it will be same as for Date selector.
• sometimes, e.g. if you click "delete" icon, you get strange text [error: bad name] in the Employee Selector (never happens for Company Selector in my tests).

I selected "February 2019" and expense is from August 2019, but it still is shown in the Grid :)

Select Month and Year in the site Header (by default should select previous month). Both values can be empty.

You always see results/enter data into last month by default. For example, if today is 2.06.2019, you should see January 2019 selected. If today is 25.07.2019, you should see June 2019 selected initially.

User can't select a future period, so if today is 19.06.2019, maximum month/year value will be June 2019, while default value will be May 2019. (user will select June 2019 only to enter some data she/he may already have for "coming" month...)

On the page "Manage Employees", let's rename that "End Work" header to "Work Status"

If not value "End Work" in DB, let's write "Active"
If the value "End Work" is set in DB, let's show "Work Ended"

I would also want to have active "Filter" (search) in the table where value "Active" is selected by default (in the header of table), i.e. so by default page show only "Active" employees (if it's too problematic to make such filter, skip this for now)

Admin adds Employees under selected Organization on the simple page to manage Employees v0.1, e.g. Grid with employees list and, for example, calculated last month bonus value).

Each employee has Name, Email (where emails will be sent) and calculated bonus value (displayed depending on the currently selected month in the site header). Technically some of employees data stored in the Users table with Role “Employee” assigned to them, some in the Employees table, some from EmployeeSettings table and some is aggregation from Income / Expenses tables.

The relevant menu item "Employees" should be visible ONLY to Admin users and should display "Manage Employees Page"

Click on "Edit" in the selected Employee row, should display separate page to Edit Employee details

Add "Help" and "About" menu items after "Expenses" (so it will be "Expenses", "Help" and the last one "About" and next will go Admin menu section). Make empty pages, for now, we will add content later.

It takes lots of space in the header and rarely used a feature, let's move it to settings like in other projects we are doing.

Add https://github.com/akveo/ngx-admin/tree/feat/update-to-8 into apps/gauzy folder

Entities (Tables in PostgreSQL):

1. Users (User entity)

| UserID | First Name | Last Name | Email | ... |

Users can be of different Role (one Role for each user for simplicity for now, unless some Starter Kit have it more complex already done)

2. Employees (Employee entity)

| EmployeeID | UserID | OrgID | ...

Each employee connected to some user and belong to some Org

3. Roles (Role entity)

| RoleID | Name |

For now, let's hardcode following roles: "Admin", "DataEntry", "Employee"

4. Organizations (Organization entity)

| OrganizationID | Name |

5. Incomes (Income entity)

| IncomeID (auto-generated int) | EmployeeID | OrgID | Date | Amount | ClientID (integer, not used for now in v0.2) | ClientName (e.g. “Upwork” or other value, string) |

6. Expenses (Expense entity)

| ExpenseID (auto-generated int value) | EmployeeID (int) | OrgID | Date | Amount | VendorName (string for now) | VendorId (will be used in v0.2, integer) | CategoryId (will be used in v0.2, integer) | CategoryName (string for now) | Notes (string) |

7. EmployeeSettings

| EmployeeID | Month | Year | SettingType | Value

We can hardcode two SettingTypes, e.g. “Salary” and “SalaryTaxes” to be used in the DB initially.

Notes

Many tables should have 3 columns with dates:
a) ValueDate - date for which given value is effective (e.g. expense effective for 22 May 2020)
b) CreatedDate (or _createdAt, whatever name we decide or default for DB) - date when record was added to DB (have nothing to do with ValueDate. I.e. it IS possible to enter data for 3 month ago or 5 month forward)
c) UpdatedDate (or _updatedAt) - date when record was last edited

In the footer, "Ever Co. LTD" should be a link to https://ever.co and text should be:

Copyright (c) 2019, Gauzy by Ever Co. LTD. All rights reserved.

Note: "Gauzy" in this text should be a link to https://gauzy.co

It should be possible to select one or more employees, click the "Delete" button and that set isActive on the selected employee records to "delete" employee.

Click on "End Work" button should ask in the popup "Ended Work" Date (Month / Year, by default, set it to last month before the current one, but allow the user to change the value if needed). So, as part of this task, we also need to add "EndedWork" date column to Employee table and set it using the value entered by a user in the popup.

Of course, any methods which load Employees should check isActive to be true so we always display only active (not deleted) employees.

However, Employee can be Active but have "End Work" date and that completely makes sense because we still want to show such employees in the UI and reports (they not working in the company anymore, but for example bonus still needs to be paid, etc). At some point, users will probably delete such employees completely.

Admin or Data Entry role user can enter income (paid invoices, receipts, something which was already paid by customer!) for the given employee (e.g. values from Upwork).

Each “income transaction” can have some date (by default last day of the currently selected month), some income type (e.g. “Upwork”, “Client A”, etc. Note - these values are PER organization and basically represent list of company “Clients” in v0.2, but for now in v0.1 it will be just string value) and income value ($ amount, without currency in v0.1).

So Admin can just enter all as a single transaction (e.g. Employee got 1500$ in April 2019 over “Upwork”) or can decide to enter multiple transactions (useful because Upwork gives weekly values too or maybe even Admin can enter all this PER each company client, e.g. Leib or “Urwex” or “Radio Project”, etc.

For now in v0.1, we can make income structure to be very simple and f..ck clients / project tables for now etc (i.e. do NOT add them for now).

Note: for simplicity we do NOT care about invoices and other sh..t. We only care when something was PAID and it was work done by employee. So it’s really “Income” not invoices which matter here!

For example structure of “Income” table can be like this in v0.1:

| IncomeID (auto-generated int) | EmployeeID | OrgID | Date | Amount | ClientID (integer, not used for now in v0.2) | ClientName (e.g. “Upwork” or other value, string)

Of course each row should be editable v0.1 (possible just inside a grid for simplicity) and only by Admin / Data Entry user

Let's add tiny icon "Delete" near Date selector (in the header, at right to the selectors). Click on such icon should clear value in the selector. So, for the Date selector, it should just make selector be empty (no date selected). Not sure if this control has built-in feature for that. If so, use it instead of adding new icon, etc.

Admin or Date Entry role user can enter expenses for given Organization and given Employee (this is what makes our software different really!), in a given month for a given date (optionally, by default should use the selected month/year and use date for example as the last day of the month by default).

Example structure of “Expenses” Table in v0.1
| ExpenseID (auto-generated int value) | EmployeeID (int) | OrgID | Date | Amount | VendorName (string for now) | VendorId (will be used in v0.2, integer) | CategoryId (will be used in v0.2, integer) | CategoryName (string for now) | Notes (string) |

Of course each row should be editable (possible just inside a grid for simplicity) and only by Admin / Data Entry user

Below is how Expenses managed in the Freshbooks (just as an example):

• Vendor is company which bill us for expenses (for example Microsoft for Visual Studio or Google for Gmail, etc)
• Category - see description above, but it’s basically selector from trees of categories (for given Organization)
• Notes is description what was purchased. For example for Software Category and Vendor Microsoft, it can be “Visual Studio 2019 Subscription”
• The simplest design can be just to enter all data in the Grid itself. More interesting is to make it like in Freshbooks, i.e. have some block to enter new data with button “Add Expense” (or Cancel) and have Grid which display data below. Editing however seems to be done inside Grid but in special embedded (to Grid) Form

Note: Freshbooks is just given as an example, so of functionality we need only in v0.2 or later.

1. Moving Selectors to the header.
2. Move the code for fake data on selectors into Seed of DB.
3. Connect selectors with data in DB.

If "All Employees" selected in the header, both Income and Expenses pages should show ALL records in DB for given company/month (if company/month set, otherwise show ALL of the records in DB). Currently, both pages are empty if "All Employees" selected.

In addition, it will be great to add another column dynamically to the Grid (Table) on Expenses / Income page with header "Employee" and value as Employee Name (first + last)
(only if "All Employees" selected in the header of course... if specific employee selected in the header, we don't need to show such column because the value will be duplicated!).

P.S. if it's too hard to make a "dynamic" column, let me know to not waste too much time on such minor feature.

Make the first column (from left) to show Employee Image

I loaded a page on 5 August 2019, but the date in the selector is 31 August 2019 (future), which is 100% wrong...

Instead, it should be for example 31 July 2019 (last day of the previous month... its usual period for which you enter income/expenses I suppose). Another possibility is to make it actually "today" date.

I think we should actually make it as settings on a company like this:
Setting Name: "Default Value Date" (in code something like defaultValueDateType)
Possible Values:

• Today ("today")
• End of the Month ("endOfLastMonth")
• The first day of Month ("firstDayOfMonth")
• ... (can be more, but let's make for now just such fixed strings, probably some enum in code)

And so for Income / Expenses page, we should read such company setting and initialize input value according to it (best if we make some common function and not copy/paste same code to both pages)

Make Site Menu:

1. Dashboard
2. Income
3. Expenses
4. Admin

• Employees
• Organizations
• Settings (with Sub-menu, "General", etc)

At the bottom of menu show currently logged in User avatar and First Name + Last Name

See Google Doc for more info & screenshots

For the first time open the gauzy run it locally and try to understand the code.

OK, so right now we have single currency $.
We need to add a column "Currency" next to each "Value" column.
That way different income, expenses or employee monthly settings can be done in a different currency.

Important: for now, let's not make any conversion and assume that single company will make ALL entries in the single selected currency (e.g. in Bulgaria, the company will always enter all values in BGN, in Israel it always will be ILS, etc).

However, let's add setting "Currency" for each organization, where each Org will store default currency. So if I select "ILS" for Company A, all entries by default will be in ILS currency (we will later allow user to change each entry optionally to other currency, e.g. on Income page will be tiny dropdown for "Currency" near value input field). Same if for some Company B, it's "BGN", all entries will be by default in BGN, etc.

Of course, in the dashboard, where we display (NOT input, but DISPLAY) some value as "$", we will need to now display relevant currency according to the company setting for currency. However, as I described above, if it was not calculated data, but some user input we need always to use currency code value stored in DB, not from company default currency value!
(or if describe another way: for Bulgaria company, in Dashboard show all values in BGN, but for example for income rows, each row can be in a different currency and later when we calculate bonuses we will use currency conversion service)

For each record on Income we need (optional) notes field, same as we have it for Expenses.

Add "Terms and Conditions" page (route should be /legal/terms) and we have a link to it already in the Register page (fix that link with correct route)

Login page v0.1 should have only Email and Password field (and later Google option to login). When user login, we detect role of the user and show relevant UI

For Admin lots of features will be different compared to Employee role.

Data Entry role user will have features similar to Admin, but restricted in some areas).

Needs to add another table "UserCompany" which has the following columns: UserId, OrgId, IsDefault (boolean), and isActive (boolean)
The property "IsDefault" will be used for the user who logins to detect default value for Company Selector (e.g. Admin user "Ruslan" should have "Ever Technologies LTD" company as selected on the first login, because it's his default company)

On Create Org page, we will need to add a checkbox "Is Default" so the user can mark one (and only one!) company for him to be the default (setting such property for some company should just reset such property for other)

Check how "Expenses" working and make the same on "Income" page, i.e. ability to select the period and Company (btw, Company selector should be visible almost on all pages!)

Boyan: Also the search text size is too small for the input field size

yarn start from the root folder.
You will see lots of warnings like this:

WARNING: Nebular Theme: `nb-theme()` cannot find value for key `radius` for theme `corporate`
    node_modules\@nebular\theme\styles\core\theming\_get-value.scss 59:5  nb-theme()
    stdin 92:24                                                           @content
    node_modules\@nebular\theme\styles\core\theming\_install.scss 9:5     nb-for-theme()
    stdin 91:7                                                            @content
    node_modules\@nebular\theme\styles\core\theming\_install.scss 116:7   @content
    node_modules\@nebular\theme\styles\core\theming\_install.scss 97:7    nb-install-component-with-scss-vars()
    node_modules\@nebular\theme\styles\core\theming\_install.scss 115:5   nb-install-component()
    stdin 5:1

Let's fix all of them!

Select Employee name (First + Last) in the dropdown (with auto-complete) in site Header. Empty value can be "All" for image and "Employees" for text. So like [All] Employees.
When some employee selected, we can show his Name + First Letter of the Last Name (Alish A. or Ruslan K.) to save space in the site Header