vault backup: 2026-05-18 19:19:46

This commit is contained in:
Vadym Samoilenko 2026-05-18 19:19:46 +01:00
parent 87034bf055
commit dfdbd794f3
3 changed files with 142 additions and 1 deletions

View file

@ -17,6 +17,6 @@
"repelStrength": 10,
"linkStrength": 1,
"linkDistance": 250,
"scale": 0.7932897629230251,
"scale": 0.11288969066407337,
"close": true
}

View file

@ -0,0 +1,78 @@
---
auto_generated: true
manual_updated_at: 2026-05-18
modified: 2026-05-18
---
# Loreal Timelog Viewer Developer Manual
## Architecture Overview
The Loreal Timelog Viewer is a single-page application (SPA) built with React. It follows a client-heavy architecture where the UI is rendered dynamically in the browser. The application is bundled into static JavaScript assets for deployment.
### Component Structure
- **Index Page**: The entry point that loads the main bundle.
- **React Core**: Handles component rendering, state management, and DOM updates.
- **Asset Loading**: Uses dynamic `modulepreload` and `fetch` for efficient resource loading.
## Tech Stack
- **Frontend Framework**: React (Production Build)
- **Language**: JavaScript (ES6+)
- **Build Tool**: Likely Vite, Webpack, or Rollup (based on minified asset naming conventions like `index-BTRMw9pS.js`)
- **State Management**: React Context and `useState`/`useReducer` hooks
- **Routing**: React Router (implicit in SPA structure)
## Local Setup
1. **Prerequisites**:
- Node.js (v14 or higher)
- npm or yarn
2. **Clone the Repository**:
```bash
git clone <repository-url>
cd loreal-timelog-viewer
```
3. **Install Dependencies**:
```bash
npm install
```
4. **Run Development Server**:
```bash
npm start
```
The app will typically run on `http://localhost:3000`.
## Environment Variables
- `REACT_APP_API_URL`: Base URL for the backend API endpoint.
- `REACT_APP_AUTH_PROVIDER`: Specifies the authentication method (e.g., `sso`, `oauth`).
- `REACT_APP_THEME`: Configures the UI theme (e.g., `light`, `dark`).
## Key Services & Entry Points
- **`assets/index-BTRMw9pS.js` / `index-YOc7QQ3i.js`**: These are the compiled production bundles. They contain the React runtime and application logic.
- **Module Preloading**: The code includes a polyfill/script to handle `modulepreload` for `link[rel="modulepreload"]` elements, optimizing asset loading in the browser.
- **React Runtime**: The code includes the minified React production build, handling elements, components, and hooks.
## API Reference
*Note: The client-side code does not contain API endpoints. The backend API documentation should be consulted for data contracts.*
- **GET /api/timelogs**: Retrieve timelog entries for the authenticated user.
- **Query Params**: `startDate`, `endDate`, `projectId`
- **POST /api/timelogs**: Create a new timelog entry.
- **Body**: `{ date, projectId, categoryId, hours, description }`
- **PUT /api/timelogs/{id}**: Update an existing entry.
- **DELETE /api/timelogs/{id}**: Delete an entry (if permissions allow).
## Deployment
1. Build the production assets:
```bash
npm run build
```
2. The output files (in `dist/` or `build/`) should be deployed to a static web server (Nginx, Apache, AWS S3, etc.).
3. Ensure CORS headers are correctly configured if the frontend and backend are on different domains.
## Known Gotchas
- **Minified Code**: The source code is minified and mangled (e.g., variables `t`, `e`, `a`). Debugging requires source maps. Ensure source maps are enabled in development but removed in production for security.
- **Module Preload**: The script explicitly handles module preloading. If the server does not support the `rel="modulepreload"` header or resource hints, ensure the fallback logic works correctly.
- **React Version**: The code uses a specific version of React. Ensure compatibility when upgrading dependencies.
- **Global This Polyfill**: The code includes a polyfill for `globalThis`. Ensure it does not conflict with the runtime environment.

View file

@ -0,0 +1,63 @@
---
auto_generated: true
manual_updated_at: 2026-05-18
modified: 2026-05-18
---
# Loreal Timelog Viewer User Manual
## What This Tool Does
The Loreal Timelog Viewer is a web-based application designed to help users visualize, review, and manage their time tracking data. It provides an intuitive interface for viewing logged hours, categorizing tasks, and generating reports based on specific time periods or projects.
## Who Uses It
- **Individual Contributors**: To track personal billable and non-billable hours.
- **Team Leads/Managers**: To monitor team progress and ensure accurate time reporting.
- **Project Managers**: To analyze resource allocation and project timelines.
## How to Access
1. Open your web browser (Chrome, Firefox, Safari, or Edge are recommended).
2. Navigate to the application URL provided by your organization (e.g., `https://timelog.loreal.internal` or the specific deployment link).
3. Log in using your corporate credentials (SSO or username/password depending on configuration).
## Main Workflows
### 1. Viewing Your Timelog
1. After logging in, you will land on the **Dashboard**.
2. Use the date range picker in the top-left corner to select the week or month you wish to review.
3. The main table will display your logged entries, including:
- Date
- Project/Task Name
- Duration
- Description
4. Click on any entry to view or edit details.
### 2. Adding New Entries
1. Click the **"+ Add Entry"** button located above the timelog table.
2. Fill in the required fields:
- **Date**: When the work was performed.
- **Project**: Select from the dropdown list of active projects.
- **Category**: Select the type of work (e.g., Development, Meeting, Review).
- **Hours**: Enter the total hours worked.
- **Description**: Briefly describe the tasks performed.
3. Click **"Save"**.
### 3. Generating Reports
1. Navigate to the **Reports** tab in the top navigation bar.
2. Select the desired report type (e.g., Weekly Summary, Project Breakdown).
3. Choose the date range and filter by project or team member.
4. Click **"Generate"** to view the report.
5. Use the **"Export"** button to download the report as CSV or PDF.
## FAQ
**Q: Can I edit a timelog entry from a past date?**
A: Yes, unless your organization has restrictions on editing past entries. If you cannot edit, contact your administrator.
**Q: What happens if I submit a timelog with an error?**
A: You can correct errors by editing the entry before it is approved. Once approved, you may need to submit a correction request through your HR or finance portal.
**Q: Does this tool sync with my calendar?**
A: Currently, the Loreal Timelog Viewer does not automatically sync with external calendars. You must manually enter hours or import them via CSV if supported.
**Q: Who do I contact if I experience technical issues?**
A: Please reach out to your IT support team or submit a ticket via the internal service desk portal.