A01659884/progress bar

src/components/Filters/Filters.stories.tsx

@@ -18,9 +18,6 @@ export default meta;
 
 const Template: StoryFn<IFilters> = (args) => <Filters {...args} />;
 
-/**
- * A default filters component with similar options.
- */
 export const FiltersExample = Template.bind({});
 FiltersExample.args = {
   options: [

src/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,23 @@
+.progress-bar {
+    @apply w-full space-y-2 p-4 rounded-lg bg-white shadow-md;
+}
+
+.progress-bar__info {
+    @apply flex justify-between;
+}
+
+.progress-bar__info__label {
+    @apply text-text text-ellipsis w-2/3 overflow-hidden;
+}
+
+.progress-bar__info__value {
+    @apply text-text font-bold;
+}
+
+.progress-bar__bar {
+    @apply w-full h-4 bg-gray-200 rounded-xl;
+}
+
+.progress-bar__bar--progress {
+    @apply h-full rounded-xl;
+}

src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { IProgressBar } from './types';
+import ProgressBar from './ProgressBar';
+
+export default {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A progress bar component that displays a progress bar with a label and a percentage value.',
+      },
+    },
+  },
+  argTypes: {
+    progress: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 100,
+        step: 1,
+      },
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: ['green', 'yellow', 'red'],
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+
+  },tags : ["autodocs"]
+
+} as Meta;
+
+const Template: StoryFn<IProgressBar> = (args) => <ProgressBar {...args} />;
+
+// Default view of the Progress Bar component
+export const Completed = Template.bind({});
+Completed.args = {
+  progress: 100,
+  color: 'green',
+  label : 'Agent Name',
+};
+
+export const Uncompleted = Template.bind({});
+Uncompleted.args = {
+  progress: 80,
+  color: 'yellow',
+  label : 'Agent Name',
+};

src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { IProgressBar } from './types';
+import './ProgressBar.css';
+import classNames from 'classnames';
+
+/**
+ * A progress bar component that displays a progress bar with a label and a percentage value.
+ * @param progress - The progress value of the progress bar.
+ * @param color - The color of the progress bar. Can be 'green', 'yellow', or 'red'.
+ * @param label - The label of the progress bar.
+ * 
+ * @example
+ * <ProgressBar progress={50} color='green' label='Agent Name' />
+ */
+const ProgressBar: React.FC<IProgressBar> = ({ progress, color , label }) => {
+    const textColorClass = classNames({
+        'text-aci-green': color === 'green',
+        'text-aci-yellow': color === 'yellow',
+        'text-aci-red': color === 'red',
+    });
+
+    const bgColorClass = classNames({
+        'bg-aci-green': color === 'green',
+        'bg-aci-yellow': color === 'yellow',
+        'bg-aci-red': color === 'red',
+    });
+
+    const valueClasses = classNames(textColorClass, 'progress-bar__info__value');
+    const progressClass = classNames(bgColorClass, 'progress-bar__bar--progress');
+
+
+    return (
+        <div className='progress-bar'>
+
+            <div className="progress-bar__info">
+                <span className="progress-bar__info__label" >{label}</span>
+                <span className={valueClasses} >{progress}%</span>
+            </div>
+            <div className="progress-bar__bar">
+                <div
+                    className={progressClass}
+                    style={{ width: `${progress}%` }}
+                >
+                </div>
+            </div>
+        </div>
+    );
+                };
+
+export default ProgressBar;

src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { default as ProgressBar } from './ProgressBar';

src/components/ProgressBar/types.ts

@@ -0,0 +1,14 @@
+export interface IProgressBar {
+    /**
+     * The progress value of the progress bar. This value should be between 0 and 100.
+     */
+    progress: number;
+    /**
+     * The color of the progress bar.
+     */
+    color : 'green' | 'yellow' | 'red';
+    /**
+     * The label of the progress bar.
+     */
+    label : string;
+}

src/components/ProgressCard/JointTrainingExpansionPanel.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { IJointTrainingExpansionPanel } from './types';
+import JointTrainingExpansionPanel from './JointTrainingExpansionPanel';
+import { ProgressBar } from '../ProgressBar';
+
+export default {
+  title: 'Components/ProgressCard',
+  component: JointTrainingExpansionPanel,
+  argTypes: {
+    progress: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 100,
+        step: 1,
+      },
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: ['green', 'yellow', 'red'],
+      },
+    },
+    rounded: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+    parameters:
+    {
+        layout : 'centered', 
+    },
+  },
+  tags : ["autodocs"]
+
+} as Meta;
+
+const Template: StoryFn<IJointTrainingExpansionPanel> = (args) => <JointTrainingExpansionPanel {...args} />;
+// Default view of the Progress Bar component
+export const DefaultView = Template.bind({});
+DefaultView.args = {
+  progress: 50,
+  color: 'green',
+  agentName : 'Agent Name',
+  trainings : [
+  ],
+};
+

src/components/ProgressCard/JointTrainingExpansionPanel.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { IJointTrainingExpansionPanel } from './types';
+import { ProgressBar } from '../ProgressBar';
+import { Button } from '../Button';
+
+
+    // ...
+
+    const MyJointTrainingExpansionPanel: React.FC<IJointTrainingExpansionPanel> = ({ color, trainings }) => {
+        const html = [];
+        const textColor = 'aci-green-600';
+       trainings = [["10", "20", "30", "40", "50"], ["Juan", "Pedro", "Maria", "Jose", "Luis"],["calls"]] 
+
+
+        if (trainings !== null) {
+            if (trainings[0].length > 0) {
+                const [showBars, setShowBars] = useState(true); // Initialize showBars state to true
+                const [rotate, setRotate] = useState(false);
+                const trainingLabel = "Trainings of " + trainings[2][0];
+
+                const numberOfBars = trainings[0].length;
+                let promedio = 0; 
+                const rotateText = rotate ? 'w-6 h-6 text-black' : 'rotate-180 w-6 h-6 text-black';
+
+
+
+                    for (let i = 0; i < numberOfBars; i++) {
+                        promedio += parseInt(trainings[0][i]);
+                    }
+                    promedio = promedio / numberOfBars;
+
+
+
+                    html.push(
+                        <button className="w-full " onClick={() => {
+                            setShowBars(!showBars); // Toggle showBars state
+                            setRotate(!rotate); // Rotate arrow icon in button
+                        }}>
+                        <div className="flex justify-between">
+                            <div className="text-left">
+                             {trainingLabel} </div>
+                            <div className="flex text-aci-green text-right justify-end text-black">{promedio}% <svg id="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={rotateText}><path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg></div>
+
+
+
+                            </div>
+                        </button>
+                    );
+                    if (showBars) {
+                        for (let i = 0; i < numberOfBars; i++) {
+                            html.push(<ProgressBar progress={parseInt(trainings[0][i])} color={color} label={trainings[1][i]} />);
+                        }
+                    }
+                }
+                else{
+                    html.push(
+                        <div className="flex justify-between shadow-xl">
+                            <div className="text-left text-aci-green">
+                           Queue or Skill has no pending trainings. </div>
+                        </div>
+                    );
+                }
+            }
+            else if (trainings === null) {
+                html.push(
+                    <div className="flex justify-between shadow-xl">
+                        <div className="text-left text-red-700">
+                        Error fetching training data. </div>
+                    </div>
+                );
+            }
+        return (
+            <div className="w-full shadow-xl shadow-gray-400 rounded-lg border-x-8 border-y-8 border-transparent">
+                {html}
+            </div>
+        );
+    }
+
+
+export default MyJointTrainingExpansionPanel;
+

src/components/ProgressCard/types.ts

@@ -0,0 +1,10 @@
+export interface IJointTrainingExpansionPanel {
+
+    progress: number;
+    color : 'green' | 'yellow' | 'red';
+    label : string;
+    agentName : string;
+    trainings : string[][];
+
+
+}

src/components/SearchBar/SearchBar.tsx

@@ -21,17 +21,17 @@ const SearchBar: React.FC<SearchBarProps> = ({ placeholder = "Search...", onSear
 
     return (
         <div className="w-full">
-            <div className='flex items-center border border-gray-300 rounded-lg focus-within:border-blue-500'>
+            <div className='flex items-center border border-gray-300 rounded-lg focus-within:border-aci-orange'>
                 <input
                     type="text"
                     value={inputValue}
                     onChange={handleInputChange}
                     onKeyDown={handleKeyPress}
                     placeholder={placeholder}
-                    className="w-full p-2 focus:outline-none rounded-l-lg pr-10"
+                    className="text-text w-full p-2 focus:outline-none rounded-l-lg pr-10"
                 />
                 <button 
-                    className="relative flex justify-center items-center h-5 w-5 bg-aci-orange rounded mr-2 hover:bg-aci-orange-dark"
+                    className="relative flex justify-center items-center h-6 w-6 shadow bg-aci-orange rounded mr-2 hover:bg-aci-orange-dark"
                     onClick={() => onSearch(inputValue)}
                 >
                     <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">

src/components/index.ts

@@ -19,4 +19,5 @@ export { IndividualTrainingExpansionPanel } from './IndividualTrainingExpansionP
 export { SideBar } from './SideBar';
 export { SideBarElement } from './SideBarElement';
 export { AlertNav } from './AlertNav';
+export { ProgressBar } from './ProgressBar';
 export { AgentInfo } from './AgentInfo';