@omniumretail/component-library 1.1.53 → 1.1.54

package/dist/main.css

@@ -22,7 +22,8 @@
 .vw302ajYc4_7bIROncyM{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase;margin-bottom:32px}.DrsaZTs1Ny6wZ76RwDR9{font-size:var(--font-size-body-2);color:var(--color-black);font-weight:700;text-transform:uppercase}.HVSssNqaNxLcYT_1lxBL{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.ACPbYsV0wNkissVLHcFh{margin-top:16px}Label{margin-bottom:8px}.mIHYAri6ebHm4Oeb1ogj{min-width:200px}@media(max-width: 768px){.mIHYAri6ebHm4Oeb1ogj{min-width:150px}}.g19LZsD26yzPPjBtV31w .ant-select{width:100%}.g19LZsD26yzPPjBtV31w .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}.g19LZsD26yzPPjBtV31w .ant-select-arrow{color:var(--color-black)}.g19LZsD26yzPPjBtV31w .ant-switch{width:30px}
 .j8_c3JHTX0JOkT36fF6A{contain:inline-size}.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{height:50px;width:300px}@media(min-width: 1024px){.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{width:450px}}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close{color:var(--color-white);font-size:12px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close:hover{color:var(--color-black)}
 .BWmwZ5nFKyctBZyOAXzg{width:100%}.GWTSauaAl_v9W8o4YPxW{background:rgba(44,45,46,.0509803922);height:100%;position:relative}.GWTSauaAl_v9W8o4YPxW .ant-menu-light{background-color:rgba(0,0,0,0) !important;border-inline-end:none !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content{font-size:17px;line-height:20px;font-weight:var(--font-weight-semibold)}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content:hover{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-title-content{font-size:15px;line-height:18px;font-weight:var(--font-weight-medium)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item{height:30px;line-height:30px;margin-bottom:16px}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item:first-child{margin-top:-10px}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu{border-top:1px solid var(--color-orange);border-radius:0}.GWTSauaAl_v9W8o4YPxW .ant-menu-item:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-item-selected,.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-selected>.ant-menu-submenu-title{color:var(--color-orange);background-color:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline .ant-menu-sub.ant-menu-inline{background:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title{height:50px !important;line-height:50px !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title .anticon{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline.ant-menu-root .ant-menu-item>.ant-menu-title-content{overflow-x:auto;text-overflow:unset}.hWGer1IJ7RdkfQWwYfsw{position:absolute;top:24px;left:24px;right:24px;height:144px}.MD1FhirslDDwd2izGwai{font-size:var(--font-size-body-2);line-height:14px;font-weight:var(--font-weight-light);display:inline-block;padding:12px;cursor:pointer;position:absolute;right:0;top:60px}.RxGn4c38kNq8Ai4ypW_x{position:absolute;top:144px;left:24px;right:24px;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,.1)}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2)}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.9)}
-.rdjN4ln3xiUoa6Q0NMMm{display:flex;flex-direction:column;gap:16px;height:100%}@media(min-width: 600px){.rdjN4ln3xiUoa6Q0NMMm{display:grid;grid-template-columns:220px auto}}@media(min-width: 768px){.rdjN4ln3xiUoa6Q0NMMm{grid-template-columns:300px auto}}.Q4flbvKEPN6Jx9Cob22I{background:#ebeced;overflow:auto;padding:20px}@media(max-width: 599px){.Q4flbvKEPN6Jx9Cob22I{padding:20px 20px 0 20px;max-height:80px}}.hK3soC6m563VuiLnNutq{background:var(--color-white);overflow:auto;padding:20px}@media(max-width: 599px){.hK3soC6m563VuiLnNutq{height:100%}}.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-2);color:var(--color-blue);margin-bottom:12px;font-weight:var(--font-weight-semibold);text-transform:uppercase}@media(min-width: 768px){.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-4);margin-bottom:36px}}.wRCQxnQc_MZGDeiY1bcL{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-2)}@media(min-width: 768px){.wRCQxnQc_MZGDeiY1bcL{font-size:var(--font-size-body-4)}}.JRmeFBsSP1f1HJwarMpc{cursor:pointer}.Y6yF3VITdrKdQzDtqTZX{padding-left:16px}.Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-semibold)}.Y6yF3VITdrKdQzDtqTZX .aKZCkmPsc0LiPdj3sEeG .Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-light)}.aKZCkmPsc0LiPdj3sEeG{display:block}.U_3frSKmaOQyTCb9oBkg{color:var(--color-orange)}.GEZDeWAneRLnZQyf4y9l{margin-bottom:16px}@media(min-width: 768px){.GEZDeWAneRLnZQyf4y9l{margin-bottom:24px}}.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-3);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-4)}}.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-2);font-weight:var(--font-weight-light);color:var(--color-black)}@media(min-width: 768px){.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-3)}}.NZ_ohAxNxhxZsCBr2PRA{display:flex;flex-direction:row;gap:12px;margin-bottom:24px}@media(min-width: 768px){.NZ_ohAxNxhxZsCBr2PRA{margin-bottom:36px}}.CArVrMs2ac6JvM1VGLSw{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.CArVrMs2ac6JvM1VGLSw .OpqJ6gab6fPIq3KyckPO{width:100%;border-bottom:none}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV{width:100%;height:auto}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-input{min-height:140px}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-form-item{margin-bottom:16px}.OpqJ6gab6fPIq3KyckPO{width:calc(100% - 112px);border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2)}.E9TXHxbgaI6LGMZHG9bV{width:100px;height:50px;align-self:flex-end}.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-2);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-3)}}.r5obiTduSUBq1uL7oceW{font-weight:var(--font-weight-light);margin-bottom:4px}
+.rdjN4ln3xiUoa6Q0NMMm{display:flex;flex-direction:column;gap:16px;height:100%}@media(min-width: 600px){.rdjN4ln3xiUoa6Q0NMMm{display:grid;grid-template-columns:220px auto}}@media(min-width: 768px){.rdjN4ln3xiUoa6Q0NMMm{grid-template-columns:300px auto}}.Q4flbvKEPN6Jx9Cob22I{background:#ebeced;overflow:auto;padding:20px}@media(max-width: 599px){.Q4flbvKEPN6Jx9Cob22I{padding:20px 20px 0 20px;max-height:80px}}.hK3soC6m563VuiLnNutq{background:var(--color-white);overflow:auto;padding:20px}@media(max-width: 599px){.hK3soC6m563VuiLnNutq{height:100%}}.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-2);color:var(--color-blue);margin-bottom:12px;font-weight:var(--font-weight-semibold);text-transform:uppercase}@media(min-width: 768px){.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-4);margin-bottom:36px}}.wRCQxnQc_MZGDeiY1bcL{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-2)}@media(min-width: 768px){.wRCQxnQc_MZGDeiY1bcL{font-size:var(--font-size-body-4)}}.JRmeFBsSP1f1HJwarMpc{cursor:pointer}.Y6yF3VITdrKdQzDtqTZX{padding-left:16px}.Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-semibold)}.Y6yF3VITdrKdQzDtqTZX .aKZCkmPsc0LiPdj3sEeG .Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-light)}.aKZCkmPsc0LiPdj3sEeG{display:block}.U_3frSKmaOQyTCb9oBkg{color:var(--color-orange)}.GEZDeWAneRLnZQyf4y9l{margin-bottom:16px}@media(min-width: 768px){.GEZDeWAneRLnZQyf4y9l{margin-bottom:24px}}.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-3);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-4)}}.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-2);font-weight:var(--font-weight-light);color:var(--color-black)}@media(min-width: 768px){.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-3)}}.NZ_ohAxNxhxZsCBr2PRA{display:flex;flex-direction:row;gap:12px;margin-bottom:24px}@media(min-width: 768px){.NZ_ohAxNxhxZsCBr2PRA{margin-bottom:36px}}.CArVrMs2ac6JvM1VGLSw{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.CArVrMs2ac6JvM1VGLSw .OpqJ6gab6fPIq3KyckPO{width:100%;border-bottom:none}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV{width:100%;height:auto}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-input{min-height:140px}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-form-item{margin-bottom:16px}.OpqJ6gab6fPIq3KyckPO{width:calc(100% - 112px);border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2)}.E9TXHxbgaI6LGMZHG9bV{width:100px;height:50px;align-self:flex-end}.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-2);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-3)}}.r5obiTduSUBq1uL7oceW{font-weight:var(--font-weight-light);margin-bottom:4px}.CHFuXtnqohUXV_oCAEKD{font-weight:var(--font-weight-light);margin-top:20px;display:flex;gap:4px}.bIiuhNuRh643knAaSeyC{font-weight:var(--font-weight-semibold)}.DdqSfNoeh7KPEQiD0Zpe{margin-bottom:unset;width:100%}.sZh7rUlP4vu0LIE2fcab{font-weight:var(--font-weight-light);margin-bottom:4px;margin-top:16px}.mdSJ5YgFou8MwSkVypYb{margin-left:46px;margin-top:12px}.AvKaftoXc2t7E53rqtq6{display:flex;flex-direction:row;gap:4px;margin-top:12px;margin-bottom:12px}.SgT02NKW7ogui8ih5ehj{color:var(--color-black);background-color:var(--color-white);border:1px var(--color-black) solid;min-width:100px;height:20px;font-size:10px;padding:unset}@media(max-width: 767px){.SgT02NKW7ogui8ih5ehj{min-width:0px}}.SgT02NKW7ogui8ih5ehj:hover{background-color:var(--color-grey-light);color:var(--color-black) !important;border:1px var(--color-black) solid !important}.WPOztO5lxS5PXlAz75dE{color:var(--color-black);background-color:var(--color-white);border:1px var(--color-black) solid;min-width:100px;height:20px;font-size:10px;padding:unset}@media(max-width: 767px){.WPOztO5lxS5PXlAz75dE{min-width:0px}}.WPOztO5lxS5PXlAz75dE:hover{background-color:var(--color-grey-light);color:var(--color-black) !important;border:1px var(--color-black) solid !important}.ant-upload-wrapper{line-height:12px}.ant-upload-wrapper .ant-upload-list .ant-upload-list-item{max-width:100px}
+.lvTuRa6cS5HtBGBJWfyE{color:var(--color-black);background-color:var(--color-white);border:1px var(--color-black) solid;min-width:100px;height:20px;font-size:10px;padding:unset}@media(max-width: 767px){.lvTuRa6cS5HtBGBJWfyE{min-width:0px}}.lvTuRa6cS5HtBGBJWfyE:hover{background-color:var(--color-grey-light);color:var(--color-black) !important;border:1px var(--color-black) solid !important}.ant-upload-wrapper{line-height:12px}.ant-upload-wrapper .ant-upload-list .ant-upload-list-item{max-width:100px}
 .qaO99d3JMWSM8DLS1LvS{display:flex;flex-direction:column;background-color:var(--white-color);padding:24px;color:var(--color-black);width:150px;word-wrap:break-word}.G3bzjyAQXu8uaFGhNMLG{width:150px}.Zv6hI_F5yvuBDnPK8u2C{color:var(--color-blue) !important;font-size:var(--font-size-body-5);font-weight:var(--font-weight-bold)}.JxTKMPM3nEvZB42uuV1e{font-weight:var(--font-weight-semibold);font-size:var(--font-size-label);margin-top:0px}.JKKhO8apIWdMp0JLU0iD{font-weight:var(--font-weight-bold);font-size:var(--font-size-body-base)}.GqgjW40ocDFW4xi4Mszm{font-weight:var(--font-weight-regular);font-size:var(--font-size-label)}
 .zsvRMmfrmqBj9iRjtQpO{display:grid;grid-template-columns:300px auto;gap:16px;height:100%}.pb4QP8qfuDG2T6wfXkUC{overflow:auto;background:#ebeced}.gP05vt1R1r67eWteznvr{overflow:auto;background:var(--color-white)}.pb4QP8qfuDG2T6wfXkUC,.gP05vt1R1r67eWteznvr{padding:20px}.btRPAI8631Q2XXYP6nZ7{font-size:var(--font-size-body-4);color:var(--color-blue);margin-bottom:36px;font-weight:var(--font-weight-semibold);text-transform:uppercase}.SbA9dHRh1JSG4xp1Aqie{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-4)}.ZsQJQ__gMgYGYau95r8U{cursor:pointer}.PPF4FGgo1aDsBm13cNj8{padding-left:16px}.PPF4FGgo1aDsBm13cNj8 .SbA9dHRh1JSG4xp1Aqie{font-weight:var(--font-weight-semibold)}.PPF4FGgo1aDsBm13cNj8 .QEsWraNRLBQux4k4KNAE .PPF4FGgo1aDsBm13cNj8 .SbA9dHRh1JSG4xp1Aqie{font-weight:var(--font-weight-light)}.QEsWraNRLBQux4k4KNAE{display:block}.VQ09MnwMcIzpW1iabb4A{color:var(--color-orange)}.cmcMqdZJEUjlu34ag1Md{margin-bottom:32px;display:flex;justify-content:space-between;align-items:center}.i_U4mKg0Sxl4EvVzgv0L{font-size:var(--font-size-body-4);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}.Tnut0v2OeSU0e7XwrCXI{font-size:var(--font-size-body-3);font-weight:var(--font-weight-light);color:var(--color-black)}.W2hZQFsItdqKPcBu4UrA{display:flex;flex-direction:row;gap:36px;margin-bottom:36px;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);padding-bottom:4px}.tIVLagS5XxibJ4PBCNpp{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.tIVLagS5XxibJ4PBCNpp .RenA6EOwu2sFJGoqYbYz{width:100%;border-bottom:none}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9{width:100%;height:auto}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9 .ant-input{min-height:140px}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9 .ant-form-item{margin-bottom:16px}.RenA6EOwu2sFJGoqYbYz{width:calc(100% - 149px);display:flex;align-items:center}.N0_FbFF8bLYtEcr8_2B9{width:130px;min-width:130px;align-self:flex-end;display:flex;justify-content:space-between;padding-right:15px}.GaBbmrXh2G03hz6ha5vB{display:none}.QYrBVtDmfSFNxJFztXVl{min-width:130px;align-self:flex-end;display:flex;justify-content:space-between;gap:34px}.V_qOYQwuQ9mXa8aniYgl{font-size:var(--font-size-body-3);font-weight:var(--font-weight-medium)}.pvSzNydRHp3dkh3WrOeA{font-weight:var(--font-weight-light);margin-bottom:4px}.Ehgx39o1k8blh7IDJ2mg{padding:6px;font-size:var(--font-size-body-4);font-weight:var(--font-weight-medium);color:var(--color-white);border-radius:5px;display:inline-flex;letter-spacing:3px}.ifR0bkZtK7yVHD6YZ_Zz{background-color:rgba(217,217,217,.5);border-radius:5px;padding:8px 15px;display:flex;flex-direction:row;gap:50px;align-items:center}.NL5HeemkTIg0oPHDXVtO{font-size:var(--font-size-body-3);font-weight:var(--font-weight-medium);color:var(--color-black)}.koYqEMOf6wzxWpwvrFkL{display:flex;justify-content:space-between;margin-bottom:12px;margin-left:16px;gap:40px;width:100%}
 .vhUOPe6KeB6afW8Pj3M1{font-size:32px}

package/dist/types/components/CategoryResponse/index.d.ts

@@ -4,7 +4,9 @@ interface CategoryResponse {
     serverReadyData: any;
     onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
     onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
-    selectYesNoOption: any;
+    selectYesNoOption?: any;
+    addAction?: () => void;
+    addButtons?: boolean;
 }
 export declare const CategoryResponse: React.ForwardRefExoticComponent<CategoryResponse & React.RefAttributes<unknown>>;
 export {};

package/dist/types/components/Upload/index.d.ts

@@ -1,9 +1,12 @@
 import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
+import { Dispatch, SetStateAction } from 'react';
 interface UploadPropsExtended extends UploadProps {
     onImageChange?: (file: UploadFile | null) => void;
     initialFileList?: UploadFile[];
     initialImageUrl?: string;
     disable?: boolean;
+    file?: boolean;
+    setFiles?: Dispatch<SetStateAction<UploadFile<any>[]>> | any;
 }
 export declare const Upload: (props: UploadPropsExtended) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.53",
+  "version": "1.1.54",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/CategoryResponse/CategoryResponse.stories.tsx

@@ -31,7 +31,7 @@ const Template: Story<any> = (args) => {
     }
 
     useEffect(() => {
-        console.log(serverData);
+        // console.log(serverData);
     }, [serverData])
 
     return (
@@ -43,6 +43,7 @@ const Template: Story<any> = (args) => {
                     ref={categoryResponseRef}
                     onNextCategoryAvailabilityChange={handleNextCategoryAvailabilityChange}
                     onPreviousCategoryAvailabilityChange={handlePreviousCategoryAvailabilityChange}
+                    addButtons
                 >
                 </CategoryResponse>
             </div>
@@ -89,9 +90,11 @@ Primary.args = {
                             "Id": "65562A64-A24B-425A-A345-560238CA2468",
                             "QuestionId": "7D17A8A5-E299-47D3-AB49-684135DB23A3",
                             "Subject": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                            "Description": "This is a description",
+                            "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit",
                             "Grade": "0",
-                            "Answer": null
+                            "Note": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+                            "Answer": null,
+                            "ActionNames": ["Ação12345662323", "A"]
                         },
                         {
                             "Id": "85562A64-A24B-425A-A345-560238CA2468",
@@ -99,6 +102,7 @@ Primary.args = {
                             "Subject": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit",
                             "Description": "This is a description ",
                             "Grade": "0",
+                            "Note": "asasas",
                             "Answer": null
                         }
                     ]
@@ -231,7 +235,7 @@ Primary.args = {
                             "Subject": "This is a Subject",
                             "Description": "This is a description",
                             "Grade": "0",
-                            "Answer": null
+                            "Answer": "dwjdiwjdiwjdi"
                         },
                         {
                             "Id": "93862A64-A24B-425A-A345-560238CA2468",

package/src/components/CategoryResponse/index.tsx

@@ -1,6 +1,6 @@
 import styles from './styles.module.scss';
 import { useEffect, useImperativeHandle, useState } from 'react';
-import { Form } from 'antd';
+import { Form, UploadFile, Upload } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import classNames from 'classnames';
 import TextArea from 'antd/es/input/TextArea';
@@ -8,13 +8,16 @@ import { Select } from '../Select';
 import { evaluationOptions } from './evaluationOptions';
 import React from 'react';
 import { t } from 'i18next';
+import { Button } from '../Button';
 
 interface CategoryResponse {
     data: any;
     serverReadyData: any;
     onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
     onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
-    selectYesNoOption: any;
+    selectYesNoOption?: any;
+    addAction?: () => void;
+    addButtons?: boolean;
 };
 
 type Category = {
@@ -24,13 +27,18 @@ type Category = {
     Children?: Category[];
 };
 
+function generateRandomString() {
+    return Math.random().toString(36).substring(2, 14);
+}
+
 const updateCategoryAnswers = (CategoryAnswers: any[], categoryToUpdate: any, updatedQuestions: any) => {
     CategoryAnswers.forEach((category: any) => {
         if (category.Data.CategoryId === categoryToUpdate.CategoryId) {
             category.Data.Questions = category.Data.Questions.map((question: any, index: any) => {
                 return {
                     ...question,
-                    Answer: updatedQuestions[index].Answer
+                    Answer: updatedQuestions[index].Answer,
+                    Note: updatedQuestions[index].Note
                 };
             });
         }
@@ -96,9 +104,10 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
     // Setting first set of questions as default open
     const [selectedCategory, setSelectedCategory] = useState<any>(data.CategoryAnswers[0]);
     const [initialValues, setInitialValues] = useState<any>(data.CategoryAnswers[0].Data);
+    const [fileLists, setFileLists] = useState<Record<string, UploadFile[]>>({});
+    const [isNoteVisible, setIsNoteVisible] = useState<{ categoryIndex: number; questionIndex: number } | null>(null);
     const [form] = useForm();
 
-
     const updateInitialValues = (data: any) => {
         const {
             Questions,
@@ -110,7 +119,8 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
             Questions: Questions.map((question: any) => ({
                 Subject: question.Subject,
                 Description: question.Description,
-                Answer: question.Answer || ""
+                Answer: question.Answer || "",
+                Note: question.Note || ""
             })),
             OpenAnswer: OpenAnswer,
             IsYesOrNo: IsYesOrNo
@@ -126,11 +136,36 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
         setCurrentKey(index);
     };
 
+    const handleFileChange = (fileList: UploadFile[], categoryIndex: number, questionIndex: number) => {
+        const key = `${categoryIndex}_${questionIndex}`;
+        setFileLists((prev) => ({
+            ...prev,
+            [key]: fileList,
+        }));
+    };
+
+    const onPreview = async (file: UploadFile) => {
+        let src = file.url as string;
+        if (!src) {
+            src = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file.originFileObj!);
+                reader.onload = () => resolve(reader.result as string);
+            });
+        }
+        const image = new Image();
+        image.src = src;
+        const imgWindow = window.open(src);
+        imgWindow?.document.write(image.outerHTML);
+    };
+
     const onFinish = (values: any) => {
         const updatedQuestions = initialValues.Questions.map((question: any, index: number) => {
             return {
                 ...question,
-                Answer: values.Questions[index].Answer
+                Answer: values.Questions[index].Answer,
+                Note: values.Questions[index].Note,
+                Files: fileLists[`${selectedCategory.Data.CategoryId}_${index}`] || [], // Include files in the form data
             };
         });
 
@@ -204,6 +239,25 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
         props.serverReadyData(localData);
     }, [localData]);
 
+    // useEffect(() => {
+    //     const initialFileLists: Record<string, UploadFile[]> = {};
+
+    //     localData.CategoryAnswers.forEach((category: any) => {
+    //         category.Data.Questions.forEach((question: any, questionIndex: number) => {
+    //             if (question.Image && question.Image.length > 0) {
+    //                 initialFileLists[`${category.Data.CategoryId}_${questionIndex}`] = question.Files.map((file: any) => ({
+    //                     uid: file.uid || generateRandomString(), // Use a unique id or generate one
+    //                     name: file.name,
+    //                     status: 'done',
+    //                     url: file.url || file.response?.url, // Ensure the file has a URL for preview
+    //                 }));
+    //             }
+    //         });
+    //     });
+
+    //     setFileLists(initialFileLists);
+    // }, [localData]);
+
     useEffect(() => {
         const hasNext = hasCategory(currentKey, localData.CategoryAnswers, 'next');
         props.onNextCategoryAvailabilityChange(hasNext);
@@ -250,9 +304,55 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                                 <div className={styles.subject}>
                                     {question.Subject}
                                 </div>
+
                                 <div className={styles.description}>
                                     {question.Description}
                                 </div>
+
+                                {props.addButtons &&
+                                    <>
+                                        {(form.getFieldValue(`Questions`)?.[index].Note || isNoteVisible) &&
+                                            <div className={styles.noteContainer}>
+                                                <span className={styles.note}>{t('components.categoryResponse.note')}: </span>
+
+                                                {isNoteVisible?.categoryIndex === currentKey && isNoteVisible?.questionIndex === index ?
+                                                    <Form.Item name={["Questions", index, "Note"]} className={styles.form}><TextArea onBlur={() => setIsNoteVisible(null)} /></Form.Item>
+                                                    : form.getFieldValue(`Questions`)?.[index].Note}
+                                            </div>
+                                        }
+
+                                        {question?.ActionNames &&
+                                            <div className={styles.actionContainer}>
+                                                <span className={styles.note}>{t('components.categoryResponse.actions')}: </span>
+
+                                                {question?.ActionNames?.map((action: any, index: number) => (
+                                                    <span key={index} className={index > 0 ? styles.action : ''}>
+                                                        {action}
+                                                        <br />
+                                                    </span>
+                                                ))}
+                                            </div>
+                                        }
+
+                                        <div className={styles.actionsButtonsContainer}>
+                                            <Upload
+                                                listType={"text"}
+                                                fileList={fileLists[`${selectedCategory.Data.CategoryId}_${index}`] || []}
+                                                beforeUpload={() => false} // Prevent automatic upload
+                                                onChange={({ fileList }) => handleFileChange(fileList, selectedCategory.Data.CategoryId, index)}
+                                                onPreview={onPreview}
+                                            >
+                                                <Button customClass={styles.loadFile}>{t('components.upload.loadFile')}</Button>
+                                            </Upload>
+
+                                            <Button customClass={styles.actionsButtons} onClick={() => setIsNoteVisible({ categoryIndex: currentKey, questionIndex: index })}>
+                                                {form.getFieldValue(`Questions`)?.[index].Note ? t('components.categoryResponse.editNote') : t('components.categoryResponse.addNote')}
+                                            </Button>
+
+                                            <Button customClass={styles.actionsButtons} onClick={props.addAction}>{t('components.categoryResponse.createAction')}</Button>
+                                        </div>
+                                    </>
+                                }
                             </div>
                             <div className={styles.answer}>
                                 {selectedCategory.Data.OpenAnswer
@@ -262,28 +362,25 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                                         <TextArea />
                                     </Form.Item>
 
-                                    : selectedCategory.Data.IsYesOrNo
-                                        ? <Form.Item
-                                            name={["Questions", index, "Answer"]}
-                                        >
-                                            <Select options={props.selectYesNoOption}
-                                                style={{ minWidth: '100%' }}
-                                            />
-                                        </Form.Item>
-
-                                        : <Form.Item
-                                            name={["Questions", index, "Answer"]}
-                                        >
-                                            <Select options={evaluationOptions[selectedEvaluationOption]}
-                                                style={{ minWidth: '100%' }}
-                                            />
-                                        </Form.Item>
+                                    : <Form.Item
+                                        name={["Questions", index, "Answer"]}
+                                    >
+                                        <Select
+                                            options={selectedCategory.Data.IsYesOrNo
+                                                ? props.selectYesNoOption
+                                                : question?.Options?.length > 0
+                                                    ? question?.Options?.map((option: any) => ({ label: option.Value, value: option.Value }))
+                                                    : evaluationOptions[selectedEvaluationOption]
+                                            }
+                                            style={{ minWidth: '100%' }}
+                                        />
+                                    </Form.Item>
                                 }
                             </div>
                         </div>
                     ))}
                 </Form>
-            </div>
-        </div>
+            </div >
+        </div >
     );
 });

package/src/components/CategoryResponse/styles.module.scss

@@ -178,3 +178,88 @@
     font-weight: var(--font-weight-light);
     margin-bottom: 4px;
 }
+
+.noteContainer {
+    font-weight: var(--font-weight-light);
+    margin-top: 20px;
+    display: flex;
+    gap: 4px
+}
+
+.note {
+    font-weight: var(--font-weight-semibold);
+}
+
+.form {
+    margin-bottom: unset;
+    width: 100%;
+}
+
+.actionContainer {
+    font-weight: var(--font-weight-light);
+    margin-bottom: 4px;
+    margin-top: 16px;
+}
+
+.action {
+    margin-left: 46px;
+    margin-top: 12px;
+}
+
+.actionsButtonsContainer {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.actionsButtons {
+    color: var(--color-black);
+    background-color: var(--color-white);
+    border: 1px var(--color-black) solid;
+    min-width: 100px;
+    height: 20px;
+    font-size: 10px;
+    padding: unset;
+
+    @media(max-width: 767px) {
+        min-width: 0px;
+    }
+
+    &:hover {
+        background-color: var(--color-grey-light);
+        color: var(--color-black) !important;
+        border: 1px var(--color-black) solid !important;
+    }
+}
+
+.loadFile {
+    color: var(--color-black);
+    background-color: var(--color-white);
+    border: 1px var(--color-black) solid;
+    min-width: 100px;
+    height: 20px;
+    font-size: 10px;
+    padding: unset;
+
+    @media(max-width: 767px) {
+        min-width: 0px;
+    }
+
+    &:hover {
+        background-color: var(--color-grey-light);
+        color: var(--color-black) !important;
+        border: 1px var(--color-black) solid !important;
+    }
+}
+
+:global {
+    .ant-upload-wrapper {
+        line-height: 12px;
+    }
+
+    .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
+        max-width: 100px;
+    }
+}

package/src/components/Navigation/Navigation.stories.tsx

@@ -11,10 +11,9 @@ const Template: Story<NavigationProps> = (args) => <Navigation {...args}></Navig
 export const Primary = Template.bind({});
 Primary.args = {
     backLink: true,
-    homeLink: false,
+    homeLink: true,
     title: 'Gestão de Aplicações',
     loginLink: true,
-    userName: "Diogo Silva Coutinho",
     options: [
         { label: 'Option 1', action: () => alert('Option 1 clicked') },
         { label: 'Option 2', action: () => alert('Option 2 clicked') },

package/src/components/Upload/index.tsx

@@ -1,13 +1,18 @@
+import styles from './styles.module.scss';
 import { Upload as UploadAntd } from 'antd';
 import ImgCrop from 'antd-img-crop';
 import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
-import { useEffect, useState } from 'react';
+import { Button } from '../Button';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface UploadPropsExtended extends UploadProps {
     onImageChange?: (file: UploadFile | null) => void;
     initialFileList?: UploadFile[];
     initialImageUrl?: string;
     disable?: boolean;
+    file?: boolean;
+    setFiles?: Dispatch<SetStateAction<UploadFile<any>[]>> | any;
 }
 
 function generateRandomString() {
@@ -19,8 +24,11 @@ export const Upload = (props: UploadPropsExtended) => {
         onImageChange,
         initialFileList,
         initialImageUrl,
-        disable
+        disable,
+        setFiles
     } = props;
+
+    const { t } = useTranslation();
     const [fileList, setFileList] = useState<UploadFile[]>(initialFileList || []);
 
     // when component mounts or initialImageUrl changes, update fileList
@@ -36,6 +44,12 @@ export const Upload = (props: UploadPropsExtended) => {
         }
     }, [initialImageUrl]);
 
+    useEffect(() => {
+        if (setFiles) {
+            setFiles(fileList);
+        }
+    }, [fileList, setFiles]);
+
     const beforeUpload: UploadProps['beforeUpload'] = async (file: RcFile) => {
         const newFile: UploadFile = {
             uid: file.uid,
@@ -45,7 +59,7 @@ export const Upload = (props: UploadPropsExtended) => {
             originFileObj: file,
             status: 'done',
         };
-    
+
         setFileList((prevFileList) => [...prevFileList, newFile]);
         if (onImageChange) {
             onImageChange(newFile);
@@ -80,14 +94,18 @@ export const Upload = (props: UploadPropsExtended) => {
     return (
         <ImgCrop rotationSlider>
             <UploadAntd
-                listType="picture-card"
+                listType={props.file ? "text" : "picture-card"}
                 fileList={fileList}
                 beforeUpload={beforeUpload}
                 onChange={onChange}
                 onPreview={onPreview}
                 disabled={disable}
             >
-                {fileList.length < 1 && '+ Upload'}
+                {props.file
+                    ? <Button customClass={styles.loadFile}>{t('components.upload.loadFile')}</Button>
+
+                    : fileList.length < 1 && '+ Upload'
+                }
             </UploadAntd>
         </ImgCrop>
     );

package/src/components/Upload/styles.module.scss

@@ -0,0 +1,29 @@
+.loadFile {
+    color: var(--color-black);
+    background-color: var(--color-white);
+    border: 1px var(--color-black) solid;
+    min-width: 100px;
+    height: 20px;
+    font-size: 10px;
+    padding: unset;
+
+    @media(max-width: 767px) {
+        min-width: 0px;
+    }
+
+    &:hover {
+        background-color: var(--color-grey-light);
+        color: var(--color-black) !important;
+        border: 1px var(--color-black) solid !important;
+    }
+}
+
+:global {
+    .ant-upload-wrapper {
+        line-height: 12px;
+    }
+
+    .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
+        max-width: 100px;
+    }
+}

package/src/locales/en.json

@@ -69,7 +69,12 @@
             "notApplicable": "Not Applicable",
             "answer": "Answer",
             "yes": "Yes",
-            "no": "No"
+            "no": "No",
+            "note": "Note",
+            "actions": "Actions",
+            "editNote": "Edit Note",
+            "addNote": "Add Note",
+            "createAction": "Create Action"
         },
         "categoryReadOnly": {
             "categories": "Categories",
@@ -97,6 +102,9 @@
             "takePhoto": "Take Photo",
             "confirm": "Confirm",
             "takeAgain": "Take Again"
-        }        
+        },
+        "upload": {
+            "loadFile": "Upload file"
+        }       
     }
 }

package/src/locales/es.json

@@ -69,7 +69,12 @@
             "notApplicable": "No Aplicable",
             "answer": "Respuesta",
             "yes": "Si",
-            "no": "No"
+            "no": "No",
+            "note": "Nota",
+            "actions": "Acciones",
+            "editNote": "Editar Nota",
+            "addNote": "Agregar Nota",
+            "createAction": "Crear Acción"
         },
         "categoryReadOnly": {
             "categories": "Categorías",
@@ -97,6 +102,9 @@
             "takePhoto": "Tomar foto",
             "confirm": "Confirme",
             "takeAgain": "Tomar de nuevo"
-        }        
+        },
+        "upload": {
+            "loadFile": "Cargar archivo"
+        }     
     }
 }

package/src/locales/pt.json

@@ -69,7 +69,12 @@
             "notApplicable": "Não Aplicável",
             "answer": "Resposta",
             "yes": "Sim",
-            "no": "Não"
+            "no": "Não",
+            "note": "Nota",
+            "actions": "Ações",
+            "editNote": "Editar Nota",
+            "addNote": "Adicionar Nota",
+            "createAction": "Criar ação"
         },
         "categoryReadOnly": {
             "categories": "Categorias",
@@ -97,6 +102,9 @@
             "takePhoto": "Tirar Foto",
             "confirm": "Confirmar",
             "takeAgain": "Tirar Novamente"
+        },
+        "upload": {
+            "loadFile": "Carregar ficheiro"
         }
     }
 }