@omniumretail/component-library 1.1.56 → 1.1.58

package/dist/main.css

@@ -19,7 +19,7 @@
 .lOKzfPUFf3ukLT2wGZaY{display:grid;grid-template-columns:300px auto;gap:16px}.OIrZOBn2f036M5MGzc61,.adDQP_uvIYgNFVC4VdHj{background:#fff;padding:20px;overflow:auto}
 .yBjbWkudwA_AOwhHrnlc .ant-tree-title{font-weight:var(--font-weight-semibold)}.yBjbWkudwA_AOwhHrnlc button{margin-top:32px;width:100%}.yBjbWkudwA_AOwhHrnlc button:nth-child(3){margin-top:12px}.je000VEfsPqZupGr8ymu{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase}.tUDGWNXopUejF6zWJloy{margin-top:20px}
 .O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}.y8UJFmCyGQzEQk4XjnI9{display:none}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.CIMvcFtQWcBY31wttg2C{min-width:250px}@media(max-width: 768px){.CIMvcFtQWcBY31wttg2C{min-width:150px}}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}
-.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}
+.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}.k3OGGGQwXB0zmX0T61yt{display:flex;gap:32px}.JHuRhb2cRXyGWESiQ2TQ{width:100%}.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:100%;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}._Bw2YaPxzqqQRpeCMde6{word-wrap:break-word;white-space:pre-wrap;max-height:100px;overflow:auto}.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;width:100%}.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}

package/dist/types/components/Category/CategoryContent/index.d.ts

@@ -4,6 +4,7 @@ interface categoryContent {
     categorySidebarData: any;
     chooseResponseType?: boolean;
     responseTypeOptions?: any;
+    hasHeader?: boolean;
 }
 export declare const CategoryContent: (props: categoryContent) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Category/CategorySidebar/index.d.ts

@@ -1,7 +1,8 @@
 export interface Questions {
     grade: string;
-    questions: string;
+    question: string;
     info: string;
+    responseType?: string;
 }
 export interface Data {
     categoryName: string;
@@ -21,6 +22,7 @@ interface SidebarProps {
     categorySidebarInfo: any;
     categoryContentFinalData: any;
     data: DataNode[];
+    hasHeader?: boolean;
 }
 export declare const CategorySidebar: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ interface Category {
     serverReadyData: any;
     chooseResponse?: boolean;
     responseTypeOptions?: any;
+    hasHeader?: boolean;
 }
 export declare const Category: (props: Category) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Questions/SingleQuestion/index.d.ts

@@ -1 +1 @@
-export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, ...restField }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, hasHeader, ...restField }: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,5 +3,6 @@ export interface QuestionsProps {
     showCheckbox?: boolean;
     handleChanges: any;
     responseTypeOptions: any;
+    hasHeader?: boolean;
 }
 export declare const Questions: (props: QuestionsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -42,6 +42,7 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
         width: string;
     }[];
     buttonActionName?: string;
+    buttonActionLabel?: (record: any) => string;
     buttonActionMethod?: () => void;
     buttonActionStyle?: string;
 }

package/package.json

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

package/src/components/Category/Category.stories.tsx

@@ -14,95 +14,126 @@ const Template: Story<any> = (args) => {
         console.log(serverData);
     }, [serverData])
 
-    return <Category {...args} chooseResponse serverReadyData={setServerData} data={[
+    const getAnswerTypeOptions = [
         {
-            "title": "2 (Q: 0) (G: 2)",
-            "key": "0",
-            "data": {
-                "categoryName": "2",
-                "openAnswer": false,
-                "isYesOrNo": true,
-                "generalEvaluationLevel": "0",
-                "grade": "2",
-                "questions": [
-                    {
-                        "emphasis": true,
-                        "info": "lol",
-                        "mandatory": false,
-                        "question": ""
-                    }
-                ]
-            },
-            "children": []
-        },
-        {
-            "title": "1 (Q: 0) (G: 1)",
-            "key": "1",
-            "data": {
-                "categoryName": "1",
-                "openAnswer": false,
-                "isYesOrNo": false,
-                "generalEvaluationLevel": "0",
-                "grade": "1",
-                "questions": []
-            },
-            "children": [
+            "Id": "CD8D0F30-6229-4BA9-9888-4398CB21D392",
+            "Name": "Resposta Numérica",
+            "IsOpenAnswer": false,
+            "IsCheckBox": false,
+            "IsNumeric": true,
+            "HasGrade": true,
+            "IsEmphasis": false,
+            "State": "Finished",
+            "Grade": 4,
+            "Options": [
                 {
-                    "title": "1.1 (Q: 0) (G: 1.1)",
-                    "key": "1.0",
-                    "data": {
-                        "categoryName": "1.1",
-                        "openAnswer": false,
-                        "isYesOrNo": false,
-                        "generalEvaluationLevel": "0",
-                        "grade": "1.1",
-                        "questions": []
-                    },
-                    "children": [
-                        {
-                            "title": "1.1.1 (Q: 0) (G: 1.1.1)",
-                            "key": "1.0.0",
-                            "data": {
-                                "categoryName": "1.1.1",
-                                "openAnswer": false,
-                                "isYesOrNo": false,
-                                "generalEvaluationLevel": "0",
-                                "grade": "1.1.1",
-                                "questions": []
-                            },
-                            "children": []
-                        }
-                    ]
+                    "Value": "string",
+                    "Grade": 5,
+                    "Color": "string",
+                    "NeedsAction": true
                 }
-            ]
+            ],
+            "CreateDate": "2024-02-29T10:21:18.448Z",
+            "UpdateDate": "2024-06-04T14:51:29.942Z",
+            "StartDate": "2024-06-04T14:51:29.942Z",
+            "Status": "A"
         },
         {
-            "title": "3 (Q: 0) (G: 3)",
-            "key": "2",
-            "data": {
-                "categoryName": "3",
-                "openAnswer": true,
-                "isYesOrNo": false,
-                "generalEvaluationLevel": "0",
-                "grade": "3",
-                "questions": []
-            },
-            "children": []
-        }
-    ]} responseTypeOptions={[
-        {
-            "value": "B867BEA8-E0A4-44D2-BBDA-7CB89334D80E",
-            "label": "teste3Update",
+            "Id": "DF873E84-1941-45E1-84C5-D2D12A0E305D",
+            "Name": "Sim ou Não",
+            "IsOpenAnswer": false,
+            "IsCheckBox": false,
+            "IsNumeric": false,
+            "HasGrade": false,
+            "IsEmphasis": false,
+            "State": "Draft",
+            "Grade": 0,
+            "Options": [
+                {
+                    "Value": "Sim",
+                    "Grade": 5,
+                    "Color": "5B95E5D8-6E78-4B53-8196-CD6996BB824A",
+                    "NeedsAction": false
+                },
+                {
+                    "Value": "Nao",
+                    "Grade": 10,
+                    "Color": "",
+                    "NeedsAction": true
+                }
+            ],
+            "CreateDate": "2024-04-12T14:58:32.085Z",
+            "UpdateDate": "2024-04-12T14:58:32.085Z",
+            "StartDate": "0001-01-01T00:00:00Z",
+            "Status": "A"
         },
         {
-            "value": "B8267BEA8-E0A4-44D2-BBDA-7CB89334D80E",
-            "label": "test2eUpdate",
+            "Id": "B867BEA8-E0A4-44D2-BBDA-7CB89334D80E",
+            "Name": null,
+            "IsOpenAnswer": false,
+            "IsCheckBox": false,
+            "IsNumeric": false,
+            "HasGrade": false,
+            "IsEmphasis": false,
+            "State": "Draft",
+            "Grade": 0,
+            "Options": [
+                {
+                    "Value": "Sim",
+                    "Grade": 5,
+                    "Color": "5B95E5D8-6E78-4B53-8196-CD6996BB824A",
+                    "NeedsAction": false
+                },
+                {
+                    "Value": "Nao",
+                    "Grade": 10,
+                    "Color": "",
+                    "NeedsAction": true
+                }
+            ],
+            "CreateDate": "2024-04-12T14:58:32.085Z",
+            "UpdateDate": "2024-04-12T14:58:32.085Z",
+            "StartDate": "0001-01-01T00:00:00Z",
+            "Status": "A"
         },
         {
-            "value": "B867B4EA8-E0A4-44D2-BBDA-7CB89334D80E",
-            "label": "testeU4pdate",
+            "Id": "058D4541-8739-49C2-85D0-A6BF3BA19E4E",
+            "Name": "Verdade ou mentira",
+            "IsOpenAnswer": false,
+            "IsCheckBox": false,
+            "IsNumeric": false,
+            "HasGrade": false,
+            "IsEmphasis": false,
+            "State": "Finished",
+            "Grade": 0,
+            "Options": [
+                {
+                    "Value": "Verdadeiro",
+                    "Grade": 1,
+                    "Color": "5B95E5D8-6E78-4B53-8196-CD6996BB824A",
+                    "NeedsAction": false
+                },
+                {
+                    "Value": "Mentira",
+                    "Grade": 0,
+                    "Color": "5B95E5D8-6E78-4B53-8196-CD6996BB824A",
+                    "NeedsAction": true
+                }
+            ],
+            "CreateDate": "2024-04-18T16:11:59.622Z",
+            "UpdateDate": "2024-04-18T16:12:13.135Z",
+            "StartDate": "2024-04-18T16:12:13.135Z",
+            "Status": "A"
         }
-    ]}></Category>
+    ]
+
+    const answerTypeOptions = getAnswerTypeOptions?.map((answerType) => ({
+        value: answerType?.Id,
+        label: answerType?.Name
+    }));
+
+
+    return <Category {...args} chooseResponse serverReadyData={setServerData} responseTypeOptions={answerTypeOptions} hasHeader data={[]}></Category>
 };
 
 export const Primary = Template.bind({});

package/src/components/Category/CategoryContent/index.tsx

@@ -15,6 +15,7 @@ interface categoryContent {
     categorySidebarData: any;
     chooseResponseType?: boolean;
     responseTypeOptions?: any;
+    hasHeader?: boolean;
 }
 
 const defaultInitialValues = {
@@ -30,7 +31,8 @@ export const CategoryContent = (props: categoryContent) => {
         categoryContentShow,
         categorySidebarData,
         chooseResponseType,
-        responseTypeOptions
+        responseTypeOptions,
+        hasHeader
     } = props;
 
     const [contentInfo, setContentInfo] = useState<any>(defaultInitialValues);
@@ -79,6 +81,8 @@ export const CategoryContent = (props: categoryContent) => {
         setSwitchYesOrNoAnswStatus(initialValues?.isYesOrNo || false);
     }, [form, initialValues]);
 
+    console.log();
+
     return (
         <div className={styles.categoryContent}>
             <div className={styles.title}>{t('components.categoryContent.editCategory')}</div>
@@ -98,17 +102,41 @@ export const CategoryContent = (props: categoryContent) => {
                             form={form}
                         >
                             <div className={styles.formHeader}>
-                                <div className={styles.category}>
-                                    <Label isUppercase>
-                                        {t('components.categoryContent.categoryName')}
-                                    </Label>
-                                    <Form.Item
-                                        name={['categoryName']}
-                                        rules={[{ required: true, message: t('components.categoryContent.categoryNameError')! }]}
-                                        validateTrigger="onBlur"
-                                    >
-                                        <InputField placeholder={t('components.categoryContent.categoryName')!} onBlur={handleInputChange} />
-                                    </Form.Item>
+                                <div className={styles.categoryNameContainer}>
+                                    <div className={styles.categoryName}>
+                                        <Label isUppercase>
+                                            {t('components.categoryContent.categoryName')}
+                                        </Label>
+                                        <Form.Item
+                                            name={['categoryName']}
+                                            rules={[{ required: true, message: t('components.categoryContent.categoryNameError')! }]}
+                                            validateTrigger="onBlur"
+                                        >
+                                            <InputField
+                                                disabled={categorySidebarData?.data?.key === "0" && hasHeader}
+                                                placeholder={t('components.categoryContent.categoryName')!}
+                                                onBlur={handleInputChange}
+                                            />
+                                        </Form.Item>
+                                    </div>
+
+                                    { categorySidebarData?.data?.key === "0" && hasHeader &&
+                                        <div className={styles.categoryName}>
+                                            <Label isUppercase>
+                                                {t('components.categoryContent.tamplateName')}
+                                            </Label>
+                                            <Form.Item
+                                                name={['name']}
+                                                rules={[{ required: true, message: t('components.categoryContent.templateNameError')! }]}
+                                                validateTrigger="onBlur"
+                                            >
+                                                <InputField
+                                                    placeholder={t('components.categoryContent.tamplateName')!}
+                                                    onBlur={handleInputChange}
+                                                />
+                                            </Form.Item>
+                                        </div>
+                                    }
                                 </div>
 
                                 {categorySidebarData?.data?.children?.length > 0 &&
@@ -214,6 +242,7 @@ export const CategoryContent = (props: categoryContent) => {
                                             showCheckbox={chooseResponseType && true}
                                             handleChanges={handleInputChange}
                                             responseTypeOptions={responseTypeOptions}
+                                            hasHeader={categorySidebarData?.data?.key === "0" && hasHeader}
                                         />
                                     </Form.Item>
                                 </div>

package/src/components/Category/CategoryContent/styles.module.scss

@@ -7,6 +7,15 @@
     margin-bottom: 32px;
 }
 
+.categoryNameContainer {
+    display: flex;
+    gap: 32px;
+}
+
+.categoryName {
+    width: 100%;
+}
+
 .uncheckedCategory {
     font-size: var(--font-size-body-2);
     color: var(--color-black);

package/src/components/Category/CategorySidebar/index.tsx

@@ -8,8 +8,9 @@ import { t } from 'i18next';
 
 export interface Questions {
     grade: string;
-    questions: string;
+    question: string;
     info: string;
+    responseType?: string;
 }
 export interface Data {
     categoryName: string;
@@ -30,6 +31,7 @@ interface SidebarProps {
     categorySidebarInfo: any;
     categoryContentFinalData: any;
     data: DataNode[];
+    hasHeader?: boolean;
 }
 
 function get_element_by_index(data: DataNode[], index: string | number): DataNode | null {
@@ -81,10 +83,49 @@ export const CategorySidebar = (props: SidebarProps) => {
     const {
         categoryContentData,
         categoryContentFinalData,
-        data
+        data,
+        hasHeader
     } = props;
 
-    const [gData, setGData] = useState(data);
+    const [gData, setGData] = useState<DataNode[]>(() => {
+        // Adiciona a categoria "Header" se hasHeader for true
+        if (hasHeader && data?.length === 0) {
+            const headerCategory: DataNode = {
+                title: t('components.category.header'),
+                key: '0',
+                data: {
+                    categoryName: t('components.category.header'),
+                    generalEvaluationLevel: '',
+                    grade: '',
+                    openAnswer: false,
+                    questions: [
+                        {
+                            grade: '',
+                            question: 'Loja',
+                            info: '',
+                            responseType: '-1'
+                        },
+                        {
+                            grade: '',
+                            question: 'Autor',
+                            info: '',
+                            responseType: '-1'
+                        },
+                        {
+                            grade: '',
+                            question: 'Localidade',
+                            info: '',
+                            responseType: '-1'
+                        }
+                    ]
+                },
+                children: []
+            };
+            return [headerCategory, ...data];
+        }
+        return data;
+    });
+
     const [expandedKeys] = useState([]);
     const [sidebarInfo, setSidebarInfo] = useState<any>(undefined);
 
@@ -100,6 +141,10 @@ export const CategorySidebar = (props: SidebarProps) => {
         const { data: nodeData } = info.node as DataNode;
         const questions: Questions[] | undefined = nodeData?.questions;
 
+        if (hasHeader && (dragKey === '0' || dropKey === '0')) {
+            return;
+        }
+
         if (questions && questions.length > 0) {
             // console.log('you cant add a subcategory to a category with questions');
             return;
@@ -166,15 +211,22 @@ export const CategorySidebar = (props: SidebarProps) => {
             }
         }
 
-        function generateCategoryKeys(categories: any[], parentKey: string = ''): any[] {
-            let keyCounter = 0;
-            return categories.map((category: any, index: number) => {
-                const categoryKey = `${parentKey}${parentKey ? '.' : ''}${keyCounter++}`;
-                let children: any = [];
+        function generateCategoryKeys(categories: DataNode[], parentKey: string = ''): DataNode[] {
+            let keyCounter = parentKey === '' ? 1 : parseInt(parentKey, 10) + 1; // Inicia o contador de chaves
+
+            return categories.map((category: DataNode) => {
+                if (hasHeader && (category.key === '0')) {
+                    return category; // Mantém a chave do Header fixa
+                }
+
+                const categoryKey = `${keyCounter++}`; // Incrementa o contador para cada categoria
+
+                let children: DataNode[] = [];
                 if (category.children) {
-                    children = generateCategoryKeys(category.children, categoryKey);
+                    children = generateCategoryKeys(category.children, categoryKey); // Gera chaves para os filhos recursivamente
                 }
-                return { ...category, key: categoryKey, children };
+
+                return { ...category, key: categoryKey, children }; // Atualiza a chave e os filhos
             });
         }
 
@@ -240,15 +292,15 @@ export const CategorySidebar = (props: SidebarProps) => {
         <div className={styles.categorySidebar}>
             <div className={styles.title}>Categorias</div>
             <Button icon={<PlusOutlined />} onClick={addCategory}>
-                { t('components.categorySidBar.addCategory') }
+                {t('components.categorySidBar.addCategory')}
             </Button>
 
             {
-                sidebarInfo &&
-                <Button icon={<MinusOutlined />} onClick={removeCategory}>
-                    { t('components.categorySidBar.removeCategory') }
-                </Button>
-            }
+                sidebarInfo && (hasHeader ? sidebarInfo[0] !== '0' : true) && (
+                    <Button icon={<MinusOutlined />} onClick={removeCategory}>
+                        {t('components.categorySidBar.removeCategory')}
+                    </Button>
+                )}
 
 
             <div className={styles.categoryViewer}>

package/src/components/Category/index.tsx

@@ -8,13 +8,15 @@ interface Category {
     serverReadyData: any;
     chooseResponse?: boolean;
     responseTypeOptions?: any;
+    hasHeader?: boolean;
 }
 
 export const Category = (props: Category) => {
     const {
         data,
         chooseResponse,
-        responseTypeOptions
+        responseTypeOptions,
+        hasHeader
     } = props;
 
     const [categoryContentInfo, setCategoryContentInfo] = useState<any>();
@@ -38,6 +40,7 @@ export const Category = (props: Category) => {
                     categoryContentData={categoryContentInfo}
                     data={data}
                     categoryContentFinalData={setFinalData}
+                    hasHeader={hasHeader}
                 />
             </div>
             <div className={styles.contentWrapper}>
@@ -47,6 +50,7 @@ export const Category = (props: Category) => {
                     categoryContentInfo={setCategoryContentInfo}
                     categoryContentShow={showContent}
                     categorySidebarData={categorySidebarInfo}
+                    hasHeader={hasHeader}
                 />
             </div>
         </div>

package/src/components/Questions/SingleQuestion/index.tsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss';
 import { useState } from 'react';
 import { Select } from 'antd';
 
-export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, ...restField }: any) => {
+export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, hasHeader, ...restField }: any) => {
     const [mandatoryCheckbox, setMandatoryCheckbox] = useState<boolean>(false);
     const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(false);
 
@@ -88,29 +88,34 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
                     <div className={styles.questionFooter}>
                         <div />
 
-                        <div className={styles.checkboxContainer}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'mandatory']}
-                                valuePropName='checked'
-                            >
-                                <Checkbox onChange={(e) => onCheckboxMandatoryHandler(e.target.checked)} checked={mandatoryCheckbox} />
-                            </Form.Item>
-
-                            <span>{t('components.category.mandatoryAnswer')}</span>
-                        </div>
-
-                        <div className={styles.checkboxContainer}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'emphasis']}
-                                valuePropName='checked'
-                            >
-                                <Checkbox onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)} checked={emphasisCheckbox} />
-                            </Form.Item>
-
-                            <span>{t('components.category.emphasisAnswer')}</span>
-                        </div>
+                        {!hasHeader &&
+                            <>
+
+                                <div className={styles.checkboxContainer}>
+                                    <Form.Item
+                                        {...restField}
+                                        name={[name, 'mandatory']}
+                                        valuePropName='checked'
+                                    >
+                                        <Checkbox onChange={(e) => onCheckboxMandatoryHandler(e.target.checked)} checked={mandatoryCheckbox} />
+                                    </Form.Item>
+
+                                    <span>{t('components.category.mandatoryAnswer')}</span>
+                                </div>
+
+                                <div className={styles.checkboxContainer}>
+                                    <Form.Item
+                                        {...restField}
+                                        name={[name, 'emphasis']}
+                                        valuePropName='checked'
+                                    >
+                                        <Checkbox onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)} checked={emphasisCheckbox} />
+                                    </Form.Item>
+
+                                    <span>{t('components.category.emphasisAnswer')}</span>
+                                </div>
+                            </>
+                        }
 
                         <div className={styles.checkboxContainer}>
                             <Form.Item