Skip to content

Latest commit

 

History

History
111 lines (82 loc) · 2.8 KB

README.md

File metadata and controls

111 lines (82 loc) · 2.8 KB

Call Management System

This project is a call management system built using React and TypeScript. It provides an interface to display, filter and interact with call records.

Features

  • Data Filtering:
    • Filtering calls by incoming, outgoing and all types.
    • Filtering by different time periods: 3 days, week, month, year, and the ability to specify custom dates.
  • Call Tables:
    • Display calls for selected periods sorted by time and duration.
    • Display call information including type, time, employee, contact information, source, and rating.
  • Audio Player:
    • Playback of call recordings.
    • The audio player remains visible until the user manually closes it.
  • User Interface:
    • Interactive elements to enhance the user experience.

Technologies Used

  • React
  • TypeScript
  • Redux
  • Date-fns
  • SCSS

Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

  • Node.js and npm installed on your machine.

Installation

  1. Clone the repository:

    git clone https://github.com/eugenepokalyuk/react-skilla.git
cd react-skilla

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run dev

  4. Open the application:

    Open your browser and navigate to http://localhost:5173.

Project Structure

src/
├── assets/
│   └── icons/
├── components/
│   ├── App/
│   │   ├── App.tsx
│   │   └── App.scss
│   ├── CallList/
│   │   ├── CallList.tsx
│   │   └── CallList.scss
│   ├── CellTable/
│   │   ├── CellTable.tsx
│   │   └── CellTable.scss
│   ├── CustomAudioPlayer/
│   │   ├── CustomAudioPlayer.tsx
│   │   └── CustomAudioPlayer.scss
├── store/
│   ├── callsSlice.ts
│   └── index.ts
├── utils/
│   └── consts.ts
├── api/
│   └── callsApi.ts
└── main.tsx

Explanation of Key Files

  • src/components/CallList/CallList.tsx: The main component for call list display and filtering.
  • src/components/CellTable/CellTable.tsx: A table component that displays calls.
  • src/components/CustomAudioPlayer/CustomAudioPlayer.tsx: Custom audio player for playing call recordings.

Comments

  • The application uses Redux for status management and Date-fns to handle dates.
  • Filters allow users to easily find and view desired calls.
  • The audio player provides playback of call recordings with easy-to-use controls.

Deployment

To build the application for production, run:

npm run build

The built files will be in the dist directory, which can be deployed to any static hosting service.