{"id":37854308,"url":"https://github.com/thembones79/lem-client","last_synced_at":"2026-01-16T16:24:22.446Z","repository":{"id":40339140,"uuid":"282039825","full_name":"thembones79/lem-client","owner":"thembones79","description":"GUI in ReactJS for LEM (Line Efficiency Monitoring) System","archived":false,"fork":false,"pushed_at":"2025-12-31T09:10:49.000Z","size":5465,"stargazers_count":1,"open_issues_count":68,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-04T13:16:08.070Z","etag":null,"topics":["bem","frontend","gui","manufacturing","production","react","redux","sass","spa"],"latest_commit_sha":null,"homepage":"https://riverdi-lem.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thembones79.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-07-23T19:37:41.000Z","updated_at":"2021-12-15T17:10:51.000Z","dependencies_parsed_at":"2023-12-20T15:43:52.986Z","dependency_job_id":null,"html_url":"https://github.com/thembones79/lem-client","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/thembones79/lem-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thembones79%2Flem-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thembones79%2Flem-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thembones79%2Flem-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thembones79%2Flem-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thembones79","download_url":"https://codeload.github.com/thembones79/lem-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thembones79%2Flem-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28479782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","frontend","gui","manufacturing","production","react","redux","sass","spa"],"created_at":"2026-01-16T16:24:22.370Z","updated_at":"2026-01-16T16:24:22.427Z","avatar_url":"https://github.com/thembones79.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GUI in ReactJS for LEM (Line Efficiency Monitoring) System\n\n[**LEM System**](https://riverdi-lem.netlify.app/) is an internal tool for measuring and monitoring manufacturing/production lines **[app overview](https://github.com/thembones79/cs50x/tree/master/project#readme)**.\n\nThe project was created as the [final project](https://cs50.harvard.edu/x/2020/project/) to graduate [Harvard\u0026#39;s CS50](https://cs50.harvard.edu/x/2020/) for benefit of my colleagues at Manufacturing Department of [Unisystem](https://www.unisystem-displays.com/en/) and [Riverdi](https://riverdi.com/) (Industrial display and touch screen manufacturer).\n\nThe application has to solve some issues that my folks have to tackle on daily basis.\n\n## The main features of **[LEM System](https://github.com/thembones79/cs50x/tree/master/project#readme)**:\n\n**The software has to:**\n\n1. Utilize bar-code scanners (in fact, it is not a bar code but [Data Matrix](https://en.wikipedia.org/wiki/Data_Matrix) – it\u0026#39;s 2D code, somewhat similar to QR Code) that the company bought for scanning newly developed stickers that are placed on ready made products (as input data)\n2. Read MS Excel file with production schedule and part number details and retrieve data about `tact times`, `part numbers` and `orders` to work with.\n3. Give an instant feedback about `MCT` (Mean Cycle Time), `LCT` (Last Cycle Time), `Efficiency`, estimated `order duration` and estimated `time of order completion`. (also with colors - GREEN and RED so people can instantly see if they are winning or losing)\n4. Give an information about `order`, `customer`, manufactured piece (part number), ordered `quantity`\n5. Give an information about `missing pieces`\n6. Give an information of mixed up pieces (for example the same part number but form another order from same or another client\n7. Give feedback about counting one piece more than once\n8. Give information about how many pieces (of current order) was done on current line and on all the lines and how many pieces are to do\n9. Give ability to have `breaks` during completion the given order\n10. Give ability to `work on more than one line`\n11. Give ability to `start an order on one line and finish it on another`\n12. Give ability to work on `more than one order simultaneously`\n13. Give ability to work on `the same (big) order on more than one line at the same time`\n14. Handle users (production workers, service, foremen and managers) accounts (with `authorization` and `authentication`)\n15. When user reserves a line, the line has to be unavailable to another user until it is released\n\n**Future:**\n\nManager dashboard with:\n\n1. Statistics: orders, users, lines, errors, times, partnumbers\n1. User account management\n1. Line management\n1. Order and work scheduling (← that one, can be implemented only when the application will be independent form this huge excel spreadsheet that is currently a bread and butter of all department and everything is based on it)\n\n## Frontend tooling:\n\n- Project was initiated by [Create React App](https://github.com/facebook/create-react-app) tool.\n- Using [Redux](https://redux.js.org/) for state management.\n- Using [Redux Form](https://redux-form.com/) for form data handling.\n- Side effects and asynchronous actions dispatches are handled in [Redux Thunk](https://github.com/reduxjs/redux-thunk) middleware.\n- Using [React Router](https://reactrouter.com/) for routing.\n- Using [SASS](https://sass-lang.com/) preprocessor and [BEM](http://getbem.com/) naming convention for CSS development\n- [Wireframes](https://xd.adobe.com/view/63aa12c9-36fe-4d67-a34a-670e314ef771-36f9/grid) and [mockups](https://xd.adobe.com/view/e7eef714-c7ad-4872-819a-0de046fcd278-b2bd/grid) were created in Adobe XD\n\nThe app is meant to work with some kind of backend. In this particular system, there is a REST API in NodeJS ([app](https://riverdi-lem.herokuapp.com/), [code](https://github.com/thembones79/lem-server#readme)).\n\nLEM System is meant to be an internal tool, so there is no \u0026quot;sign up\u0026quot; feature. Users can not add themselves to the system, they can be added only by admin/manager.\n\n### Install:\n\n```\nnpm install\n```\n\n### Run:\n\n```\nnpm start\n```\n\n## Usage:\n\n### Scanner Page\n\nAfter successful log in a standard user (\u0026quot;operator\u0026quot;) would see Scanner Page (the main feature of the application). Here the user can:\n\n- Pick a line to work on\n- Pick an order to process\n- Start order processing\n- Input a scan data from barcode reader into the system\n- Pause the order on chosen line (and, for example, work with another order)\n- Resume paused order\n- Finish the order\n- Delete the order\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/ScannerPage.png\" /\u003e\n\u003c/p\u003e\n\n---\n\nAt this very moment the app has 35 components, the picture above shows 11 ones that standard user (\u0026quot;operator\u0026quot;) will see 99% of the time:\n\n**ScanList** – shows a list (array) of `ScanContent` components (fetched from the API). The displayed list applies only to the selected order on the selected line.\n\n**ScanContent** – shows formatted text content of particular scan with a timestamp (and result of scan validation with a message and appropriate icon).\n\n**ReaderInput** – (disabled when chosen order is paused on chosen line or the order hasn\u0026#39;t started yet) an input field that reads data from the scanner (text string with newline character at the end) and feeds it into the API\n\n**LinePicker** – (disabled when ReaderInput is enabled) select field that fetches and shows lines with \u0026quot;free\u0026quot; status, and already occupied by current user.\n\n**OrderPicker** – (disabled when `ReaderInput` is enabled or there is no picked line) select field that fetches and shows orders to work with (every option shows: `orderNumber`, `partNumber`, `customer`, `quantity`).\n\n**OrderButtons** – there are 5 buttons for handling orders on the `scannerPage`:\n\n- **`START`** – visible only if chosen order hasn\u0026#39;t started yet, enables `ReaderInput` component, disables `LinePicker` and `OrderPicker`, creates (disabled) `FINISH` and `DELETE` buttons.\n- **`PAUSE`** – visible only when order is in progress, adds a new break to selected order (request to the backend), disables `ReaderInput` component, enables `LinePicker`, `OrderPicker` components and `FINISH`, `DELETE` buttons.\n- **`RESUME`** – visible only when order is paused, finishes started break (request to the backend), enables `ReaderInput` component, disables `LinePicker`, `OrderPicker` components and `FINISH`, `DELETE` buttons.\n- **`FINISH`** – (enabled only when order is paused), changes the status of chosen order to \u0026quot;closed\u0026quot; (via confirmation modal), disables `ReaderInput` component, enables `LinePicker`, `OrderPicker` components, removes all buttons besides `DELETE`.\n- **`DELETE`** – (enabled when order is paused or closed/finished) removes chosen order from system (via confirmation modal)\n\n**MissingScans** – displays a list of scans needed to complete the order\n\n**DoneTodoCard** – displays numbers item that are done on selected line and number of items to do (all lines in total)\n\n**OrderInfoCard** – displays general information about selected order: order number, customer, part number, quantity, items done (on all lines)\n\n**EfficiencyCard** – displays:\n\n- **`TT` (Tact Time)** – a time given to produce one item,\n- **`MCT` (Mean Cycle Time)** – mean time between scans (breaks excluded) (red when higher than `Tact Time`, green when equal or lower)\n- **`LCT` (Last Cycle Time)** – time between last and penultimate scan (break time excluded) (red when higher than `Tact Time`, green when equal or lower)\n- **`Efficiency` (in %)** – the ratio of `Tact Time `to `Mean Cycle Time` (red when below 100%, green when equal or above)\n\n**DurationTimeCard** – shows estimated duration and estimated completion time of the whole order. When order is done the component shows real total duration and actual completion time.\n\n### Closing/finishing orders\n\nAn order can be closed in two ways:\n\n1. User can click `FINISH` button\n2. User scanned all pieces of order (and order closes itself automatically)\n\n## Dashboard\n\nBesides `Scanner Page`, there is also `Dashboard Page` available. That page can be accessed only by user with a \u0026quot;manager\u0026quot; privileges. Currently it is almost empty, but in the near future it would be enhanced with: order and work scheduling (requires independence from the source excel spreadsheet), user management, line management, order management, very comprehensive statistics about errors, efficiency, tact times, cycle times, part numbers, lines with comparisons, orders, users (maybe with charts), and \u0026quot;1 page all lines live view\u0026quot;.\n\n## [ \u003e Detailed Project Overview \u003c ](https://github.com/thembones79/cs50x/tree/master/project#readme)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthembones79%2Flem-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthembones79%2Flem-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthembones79%2Flem-client/lists"}