ikoncomponents 1.2.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,3 @@
1
1
  import "react-big-calendar/lib/css/react-big-calendar.css";
2
- import "./index.css";
3
2
  import { BigCalendarProps } from "./type";
4
3
  export declare function BigCalendar({ events, extraParamsEvent, extraTools }: BigCalendarProps): import("react/jsx-runtime").JSX.Element;
@@ -4,13 +4,17 @@ import { format, getDay, parse, startOfWeek } from "date-fns";
4
4
  import { Calendar, dateFnsLocalizer, Views } from "react-big-calendar";
5
5
  import "react-big-calendar/lib/css/react-big-calendar.css";
6
6
  import { useState } from "react";
7
- import "./index.css";
8
7
  import BigCalenderToolbar from "./big-calender-toolbar";
9
8
  import BigCalenderEvent from "./big-calender-event";
9
+ import { enUS } from 'date-fns/locale';
10
10
  // Localization settings
11
11
  const locales = {
12
- "en-US": require("date-fns/locale/en-US"),
12
+ "en-US": enUS,
13
13
  };
14
+ //
15
+ // const locales = {
16
+ // "en-US": require("date-fns/locale/en-US"),
17
+ // };
14
18
  const localizer = dateFnsLocalizer({
15
19
  format,
16
20
  parse,
package/dist/styles.css CHANGED
@@ -719,9 +719,6 @@
719
719
  .w-12 {
720
720
  width: calc(var(--spacing) * 12);
721
721
  }
722
- .w-20 {
723
- width: calc(var(--spacing) * 20);
724
- }
725
722
  .w-32 {
726
723
  width: calc(var(--spacing) * 32);
727
724
  }
@@ -752,15 +749,9 @@
752
749
  .w-\[100px\] {
753
750
  width: 100px;
754
751
  }
755
- .w-\[200px\] {
756
- width: 200px;
757
- }
758
752
  .w-\[220px\] {
759
753
  width: 220px;
760
754
  }
761
- .w-\[300px\] {
762
- width: 300px;
763
- }
764
755
  .w-auto {
765
756
  width: auto;
766
757
  }
@@ -1488,9 +1479,6 @@
1488
1479
  .py-4 {
1489
1480
  padding-block: calc(var(--spacing) * 4);
1490
1481
  }
1491
- .py-5 {
1492
- padding-block: calc(var(--spacing) * 5);
1493
- }
1494
1482
  .py-6 {
1495
1483
  padding-block: calc(var(--spacing) * 6);
1496
1484
  }
@@ -2543,16 +2531,6 @@
2543
2531
  }
2544
2532
  }
2545
2533
  }
2546
- .hover\:bg-muted\/30 {
2547
- &:hover {
2548
- @media (hover: hover) {
2549
- background-color: var(--muted);
2550
- @supports (color: color-mix(in lab, red, red)) {
2551
- background-color: color-mix(in oklab, var(--muted) 30%, transparent);
2552
- }
2553
- }
2554
- }
2555
- }
2556
2534
  .hover\:bg-muted\/50 {
2557
2535
  &:hover {
2558
2536
  @media (hover: hover) {
@@ -2874,11 +2852,6 @@
2874
2852
  opacity: 50%;
2875
2853
  }
2876
2854
  }
2877
- .disabled\:opacity-100 {
2878
- &:disabled {
2879
- opacity: 100%;
2880
- }
2881
- }
2882
2855
  .in-data-\[side\=left\]\:cursor-w-resize {
2883
2856
  :where(*[data-side="left"]) & {
2884
2857
  cursor: w-resize;
@@ -4915,7 +4888,7 @@
4915
4888
  --accent: oklch(0.269 0 0);
4916
4889
  --accent-foreground: oklch(0.985 0 0);
4917
4890
  --calender-foreground: oklch(98.511% 0.00011 271.152);
4918
- --destructive: #F43F5E;
4891
+ --destructive: #f43f5e;
4919
4892
  --border: #454545;
4920
4893
  --input: oklch(1 0 0 / 15%);
4921
4894
  --ring: oklch(0.556 0 0);
@@ -4955,19 +4928,19 @@
4955
4928
  --secondary-foreground: oklch(0.985 0 0);
4956
4929
  --muted: oklch(0.269 0 0);
4957
4930
  --muted-foreground: oklch(0.708 0 0);
4958
- --accent: #1F3ABA;
4931
+ --accent: #1f3aba;
4959
4932
  --accent-foreground: oklch(0.985 0 0);
4960
- --calender-foreground: #1F3ABA;
4961
- --destructive: #F43F5E;
4962
- --border: #494F5E;
4933
+ --calender-foreground: #1f3aba;
4934
+ --destructive: #f43f5e;
4935
+ --border: #494f5e;
4963
4936
  --input: oklch(1 0 0 / 15%);
4964
- --ring: #0C1324;
4937
+ --ring: #0c1324;
4965
4938
  --chart-1: oklch(0.488 0.243 264.376);
4966
4939
  --chart-2: oklch(0.696 0.17 162.48);
4967
4940
  --chart-3: oklch(0.769 0.188 70.08);
4968
4941
  --chart-4: oklch(0.627 0.265 303.9);
4969
4942
  --chart-5: oklch(0.645 0.246 16.439);
4970
- --sidebar: #1B2336;
4943
+ --sidebar: #1b2336;
4971
4944
  --sidebar-foreground: oklch(0.985 0 0);
4972
4945
  --sidebar-primary: oklch(0.488 0.243 264.376);
4973
4946
  --sidebar-primary-foreground: oklch(0.985 0 0);
@@ -4977,8 +4950,8 @@
4977
4950
  --sidebar-ring: oklch(0.556 0 0);
4978
4951
  --keross-checkbox-bg: var(--foreground);
4979
4952
  --keross-skeleton-bg: oklch(1 0 0 / 15%);
4980
- --progress-foreground: #F5F5F5;
4981
- --progress-background: #1D283A;
4953
+ --progress-foreground: #f5f5f5;
4954
+ --progress-background: #1d283a;
4982
4955
  --hover-back: oklch(0.2505 0.0528 266.07);
4983
4956
  --contrast-color: oklch(92.502% 0.00431 15.893);
4984
4957
  --btn-secondary: #00000033;
@@ -5010,6 +4983,819 @@
5010
4983
  border: none;
5011
4984
  border-radius: 50%;
5012
4985
  }
4986
+ .rbc-btn-group {
4987
+ font-size: 14px;
4988
+ }
4989
+ .custom-buttons {
4990
+ font-size: 14px;
4991
+ }
4992
+ .rbc-date-cell.rbc-now,
4993
+ .rbc-time-slot.rbc-now,
4994
+ .rbc-show-more,
4995
+ .rbc-header {
4996
+ font-weight: normal !important;
4997
+ }
4998
+ .rbc-btn {
4999
+ color: inherit;
5000
+ font: inherit;
5001
+ margin: 0;
5002
+ }
5003
+ button.rbc-btn {
5004
+ overflow: visible;
5005
+ text-transform: none;
5006
+ -webkit-appearance: button;
5007
+ -moz-appearance: button;
5008
+ appearance: button;
5009
+ cursor: pointer;
5010
+ }
5011
+ button[disabled].rbc-btn {
5012
+ cursor: not-allowed;
5013
+ }
5014
+ button.rbc-input::-moz-focus-inner {
5015
+ border: 0;
5016
+ padding: 0;
5017
+ }
5018
+ .rbc-calendar {
5019
+ -webkit-box-sizing: border-box;
5020
+ box-sizing: border-box;
5021
+ height: 100%;
5022
+ display: -webkit-box;
5023
+ display: -ms-flexbox;
5024
+ display: flex;
5025
+ font-size: 15px;
5026
+ -webkit-box-orient: vertical;
5027
+ -webkit-box-direction: normal;
5028
+ -ms-flex-direction: column;
5029
+ flex-direction: column;
5030
+ -webkit-box-align: stretch;
5031
+ -ms-flex-align: stretch;
5032
+ align-items: stretch;
5033
+ }
5034
+ .rbc-m-b-negative-3 {
5035
+ margin-bottom: -3px;
5036
+ }
5037
+ .rbc-h-full {
5038
+ height: 100%;
5039
+ }
5040
+ .rbc-calendar *,
5041
+ .rbc-calendar *:before,
5042
+ .rbc-calendar *:after {
5043
+ -webkit-box-sizing: inherit;
5044
+ box-sizing: inherit;
5045
+ }
5046
+ .rbc-abs-full,
5047
+ .rbc-row-bg {
5048
+ overflow: hidden;
5049
+ position: absolute;
5050
+ top: 0;
5051
+ left: 0;
5052
+ right: 0;
5053
+ bottom: 0;
5054
+ }
5055
+ .rbc-ellipsis,
5056
+ .rbc-show-more,
5057
+ .rbc-row-segment .rbc-event-content,
5058
+ .rbc-event-label {
5059
+ display: block;
5060
+ overflow: hidden;
5061
+ text-overflow: ellipsis;
5062
+ white-space: nowrap;
5063
+ }
5064
+ .rbc-rtl {
5065
+ direction: rtl;
5066
+ }
5067
+ .rbc-off-range {
5068
+ color: #999999;
5069
+ }
5070
+ .rbc-off-range-bg {
5071
+ background: hsl(var(--muted));
5072
+ }
5073
+ .rbc-header {
5074
+ overflow: hidden;
5075
+ -webkit-box-flex: 1;
5076
+ -ms-flex: 1 0 0%;
5077
+ flex: 1 0 0%;
5078
+ text-overflow: ellipsis;
5079
+ white-space: nowrap;
5080
+ padding: 0 3px;
5081
+ text-align: center;
5082
+ vertical-align: middle;
5083
+ font-weight: bold;
5084
+ font-size: 90%;
5085
+ min-height: 0;
5086
+ border-bottom: 1px solid hsl(var(--border));
5087
+ }
5088
+ .rbc-header + .rbc-header {
5089
+ border-left: 1px solid hsl(var(--border));
5090
+ }
5091
+ .rbc-rtl .rbc-header + .rbc-header {
5092
+ border-left-width: 0;
5093
+ border-right: 1px solid hsl(var(--border));
5094
+ }
5095
+ .rbc-header > a,
5096
+ .rbc-header > a:active,
5097
+ .rbc-header > a:visited {
5098
+ color: inherit;
5099
+ text-decoration: none;
5100
+ }
5101
+ .rbc-button-link {
5102
+ color: inherit;
5103
+ background: none;
5104
+ margin: 0;
5105
+ padding: 0;
5106
+ border: none;
5107
+ cursor: pointer;
5108
+ -webkit-user-select: text;
5109
+ -moz-user-select: text;
5110
+ -ms-user-select: text;
5111
+ user-select: text;
5112
+ }
5113
+ .rbc-row-content {
5114
+ position: relative;
5115
+ -moz-user-select: none;
5116
+ -ms-user-select: none;
5117
+ user-select: none;
5118
+ -webkit-user-select: none;
5119
+ z-index: 4;
5120
+ }
5121
+ .rbc-row-content-scrollable {
5122
+ display: -webkit-box;
5123
+ display: -ms-flexbox;
5124
+ display: flex;
5125
+ -webkit-box-orient: vertical;
5126
+ -webkit-box-direction: normal;
5127
+ -ms-flex-direction: column;
5128
+ flex-direction: column;
5129
+ height: 100%;
5130
+ }
5131
+ .rbc-row-content-scrollable .rbc-row-content-scroll-container {
5132
+ height: 100%;
5133
+ overflow-y: scroll;
5134
+ -ms-overflow-style: none;
5135
+ scrollbar-width: none;
5136
+ }
5137
+ .rbc-row-content-scrollable
5138
+ .rbc-row-content-scroll-container::-webkit-scrollbar {
5139
+ display: none;
5140
+ }
5141
+ .rbc-today {
5142
+ background-color: hsl(var(--accent));
5143
+ color: hsl(var(--accent-forground));
5144
+ }
5145
+ .rbc-toolbar {
5146
+ display: -webkit-box;
5147
+ display: -ms-flexbox;
5148
+ display: flex;
5149
+ -ms-flex-wrap: wrap;
5150
+ flex-wrap: wrap;
5151
+ -webkit-box-pack: center;
5152
+ -ms-flex-pack: center;
5153
+ justify-content: center;
5154
+ -webkit-box-align: center;
5155
+ -ms-flex-align: center;
5156
+ align-items: center;
5157
+ margin-bottom: 10px;
5158
+ font-size: 16px;
5159
+ }
5160
+ .rbc-toolbar .rbc-toolbar-label {
5161
+ -webkit-box-flex: 1;
5162
+ -ms-flex-positive: 1;
5163
+ flex-grow: 1;
5164
+ padding: 0 10px;
5165
+ text-align: center;
5166
+ }
5167
+ .rbc-toolbar button {
5168
+ color: #373a3c;
5169
+ display: inline-block;
5170
+ margin: 0;
5171
+ text-align: center;
5172
+ vertical-align: middle;
5173
+ background: none;
5174
+ background-image: none;
5175
+ border: 1px solid hsl(var(--border));
5176
+ padding: 0.375rem 1rem;
5177
+ border-radius: 4px;
5178
+ line-height: normal;
5179
+ white-space: nowrap;
5180
+ }
5181
+ .rbc-toolbar button:active,
5182
+ .rbc-toolbar button.rbc-active {
5183
+ background-image: none;
5184
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
5185
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
5186
+ background-color: #e6e6e6;
5187
+ border-color: #adadad;
5188
+ }
5189
+ .rbc-toolbar button:active:hover,
5190
+ .rbc-toolbar button:active:focus,
5191
+ .rbc-toolbar button.rbc-active:hover,
5192
+ .rbc-toolbar button.rbc-active:focus {
5193
+ color: #373a3c;
5194
+ background-color: #d4d4d4;
5195
+ border-color: #8c8c8c;
5196
+ }
5197
+ .rbc-toolbar button:focus {
5198
+ color: #373a3c;
5199
+ background-color: #e6e6e6;
5200
+ border-color: #adadad;
5201
+ }
5202
+ .rbc-toolbar button:hover {
5203
+ color: #373a3c;
5204
+ background-color: #e6e6e6;
5205
+ border-color: #adadad;
5206
+ }
5207
+ .rbc-btn-group {
5208
+ display: inline-block;
5209
+ white-space: nowrap;
5210
+ }
5211
+ .rbc-btn-group > button:first-child:not(:last-child) {
5212
+ border-top-right-radius: 0;
5213
+ border-bottom-right-radius: 0;
5214
+ }
5215
+ .rbc-btn-group > button:last-child:not(:first-child) {
5216
+ border-top-left-radius: 0;
5217
+ border-bottom-left-radius: 0;
5218
+ }
5219
+ .rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
5220
+ border-radius: 4px;
5221
+ border-top-left-radius: 0;
5222
+ border-bottom-left-radius: 0;
5223
+ }
5224
+ .rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
5225
+ border-radius: 4px;
5226
+ border-top-right-radius: 0;
5227
+ border-bottom-right-radius: 0;
5228
+ }
5229
+ .rbc-btn-group > button:not(:first-child):not(:last-child) {
5230
+ border-radius: 0;
5231
+ }
5232
+ .rbc-btn-group button + button {
5233
+ margin-left: -1px;
5234
+ }
5235
+ .rbc-rtl .rbc-btn-group button + button {
5236
+ margin-left: 0;
5237
+ margin-right: -1px;
5238
+ }
5239
+ .rbc-btn-group + .rbc-btn-group,
5240
+ .rbc-btn-group + button {
5241
+ margin-left: 10px;
5242
+ }
5243
+ @media (max-width: 767px) {
5244
+ .rbc-toolbar {
5245
+ -webkit-box-orient: vertical;
5246
+ -webkit-box-direction: normal;
5247
+ -ms-flex-direction: column;
5248
+ flex-direction: column;
5249
+ }
5250
+ }
5251
+ .rbc-event,
5252
+ .rbc-day-slot .rbc-background-event {
5253
+ border: none;
5254
+ -webkit-box-sizing: border-box;
5255
+ box-sizing: border-box;
5256
+ -webkit-box-shadow: none;
5257
+ box-shadow: none;
5258
+ margin: 0;
5259
+ padding: 2px 5px;
5260
+ background-color: hsl(var(--input));
5261
+ border-radius: 5px;
5262
+ color: #fff;
5263
+ cursor: pointer;
5264
+ width: 100%;
5265
+ text-align: left;
5266
+ }
5267
+ .rbc-slot-selecting .rbc-event,
5268
+ .rbc-slot-selecting .rbc-day-slot .rbc-background-event,
5269
+ .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
5270
+ cursor: inherit;
5271
+ pointer-events: none;
5272
+ }
5273
+ .rbc-event.rbc-selected,
5274
+ .rbc-day-slot .rbc-selected.rbc-background-event {
5275
+ background-color: #265985;
5276
+ }
5277
+ .rbc-event:focus,
5278
+ .rbc-day-slot .rbc-background-event:focus {
5279
+ outline: 5px auto #3b99fc;
5280
+ }
5281
+ .rbc-event-label {
5282
+ font-size: 80%;
5283
+ }
5284
+ .rbc-event-overlaps {
5285
+ -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
5286
+ box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
5287
+ }
5288
+ .rbc-event-continues-prior {
5289
+ border-top-left-radius: 0;
5290
+ border-bottom-left-radius: 0;
5291
+ }
5292
+ .rbc-event-continues-after {
5293
+ border-top-right-radius: 0;
5294
+ border-bottom-right-radius: 0;
5295
+ }
5296
+ .rbc-event-continues-earlier {
5297
+ border-top-left-radius: 0;
5298
+ border-top-right-radius: 0;
5299
+ }
5300
+ .rbc-event-continues-later {
5301
+ border-bottom-left-radius: 0;
5302
+ border-bottom-right-radius: 0;
5303
+ }
5304
+ .rbc-row {
5305
+ display: -webkit-box;
5306
+ display: -ms-flexbox;
5307
+ display: flex;
5308
+ -webkit-box-orient: horizontal;
5309
+ -webkit-box-direction: normal;
5310
+ -ms-flex-direction: row;
5311
+ flex-direction: row;
5312
+ }
5313
+ .rbc-row-segment {
5314
+ padding: 0 1px 1px 1px;
5315
+ }
5316
+ .rbc-selected-cell {
5317
+ background-color: rgba(0, 0, 0, 0.1);
5318
+ }
5319
+ .rbc-show-more {
5320
+ background-color: rgba(255, 255, 255, 0.3);
5321
+ z-index: 4;
5322
+ font-weight: bold;
5323
+ font-size: 85%;
5324
+ height: auto;
5325
+ line-height: normal;
5326
+ color: hsl(var(--input));
5327
+ }
5328
+ .rbc-show-more:hover,
5329
+ .rbc-show-more:focus {
5330
+ color: #265985;
5331
+ }
5332
+ .rbc-month-view {
5333
+ position: relative;
5334
+ border: 1px solid hsl(var(--border));
5335
+ display: -webkit-box;
5336
+ display: -ms-flexbox;
5337
+ display: flex;
5338
+ -webkit-box-orient: vertical;
5339
+ -webkit-box-direction: normal;
5340
+ -ms-flex-direction: column;
5341
+ flex-direction: column;
5342
+ -webkit-box-flex: 1;
5343
+ -ms-flex: 1 0 0px;
5344
+ flex: 1 0 0;
5345
+ width: 100%;
5346
+ -moz-user-select: none;
5347
+ -ms-user-select: none;
5348
+ user-select: none;
5349
+ -webkit-user-select: none;
5350
+ height: 100%;
5351
+ }
5352
+ .rbc-month-header {
5353
+ display: -webkit-box;
5354
+ display: -ms-flexbox;
5355
+ display: flex;
5356
+ -webkit-box-orient: horizontal;
5357
+ -webkit-box-direction: normal;
5358
+ -ms-flex-direction: row;
5359
+ flex-direction: row;
5360
+ }
5361
+ .rbc-month-row {
5362
+ display: -webkit-box;
5363
+ display: -ms-flexbox;
5364
+ display: flex;
5365
+ position: relative;
5366
+ -webkit-box-orient: vertical;
5367
+ -webkit-box-direction: normal;
5368
+ -ms-flex-direction: column;
5369
+ flex-direction: column;
5370
+ -webkit-box-flex: 1;
5371
+ -ms-flex: 1 0 0px;
5372
+ flex: 1 0 0;
5373
+ -ms-flex-preferred-size: 0px;
5374
+ flex-basis: 0px;
5375
+ overflow: hidden;
5376
+ height: 100%;
5377
+ }
5378
+ .rbc-month-row + .rbc-month-row {
5379
+ border-top: 1px solid hsl(var(--border));
5380
+ }
5381
+ .rbc-date-cell {
5382
+ -webkit-box-flex: 1;
5383
+ -ms-flex: 1 1 0px;
5384
+ flex: 1 1 0;
5385
+ min-width: 0;
5386
+ padding-right: 5px;
5387
+ text-align: right;
5388
+ }
5389
+ .rbc-date-cell.rbc-now {
5390
+ font-weight: bold;
5391
+ }
5392
+ .rbc-date-cell > a,
5393
+ .rbc-date-cell > a:active,
5394
+ .rbc-date-cell > a:visited {
5395
+ color: inherit;
5396
+ text-decoration: none;
5397
+ }
5398
+ .rbc-row-bg {
5399
+ display: -webkit-box;
5400
+ display: -ms-flexbox;
5401
+ display: flex;
5402
+ -webkit-box-orient: horizontal;
5403
+ -webkit-box-direction: normal;
5404
+ -ms-flex-direction: row;
5405
+ flex-direction: row;
5406
+ -webkit-box-flex: 1;
5407
+ -ms-flex: 1 0 0px;
5408
+ flex: 1 0 0;
5409
+ overflow: hidden;
5410
+ right: 1px;
5411
+ }
5412
+ .rbc-day-bg {
5413
+ -webkit-box-flex: 1;
5414
+ -ms-flex: 1 0 0%;
5415
+ flex: 1 0 0%;
5416
+ }
5417
+ .rbc-day-bg + .rbc-day-bg {
5418
+ border-left: 1px solid hsl(var(--border));
5419
+ }
5420
+ .rbc-rtl .rbc-day-bg + .rbc-day-bg {
5421
+ border-left-width: 0;
5422
+ border-right: 1px solid hsl(var(--border));
5423
+ }
5424
+ .rbc-overlay {
5425
+ position: absolute;
5426
+ z-index: 5;
5427
+ border: 1px solid #e5e5e5;
5428
+ background-color: #fff;
5429
+ -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
5430
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
5431
+ padding: 10px;
5432
+ }
5433
+ .rbc-overlay > * + * {
5434
+ margin-top: 1px;
5435
+ }
5436
+ .rbc-overlay-header {
5437
+ border-bottom: 1px solid #e5e5e5;
5438
+ margin: -10px -10px 5px -10px;
5439
+ padding: 2px 10px;
5440
+ }
5441
+ .rbc-agenda-view {
5442
+ display: -webkit-box;
5443
+ display: -ms-flexbox;
5444
+ display: flex;
5445
+ -webkit-box-orient: vertical;
5446
+ -webkit-box-direction: normal;
5447
+ -ms-flex-direction: column;
5448
+ flex-direction: column;
5449
+ -webkit-box-flex: 1;
5450
+ -ms-flex: 1 0 0px;
5451
+ flex: 1 0 0;
5452
+ overflow: auto;
5453
+ }
5454
+ .rbc-agenda-view table.rbc-agenda-table {
5455
+ width: 100%;
5456
+ border: 1px solid hsl(var(--border));
5457
+ border-spacing: 0;
5458
+ border-collapse: collapse;
5459
+ }
5460
+ .rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
5461
+ padding: 5px 10px;
5462
+ vertical-align: top;
5463
+ }
5464
+ .rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
5465
+ padding-left: 15px;
5466
+ padding-right: 15px;
5467
+ text-transform: lowercase;
5468
+ }
5469
+ .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
5470
+ border-left: 1px solid hsl(var(--border));
5471
+ }
5472
+ .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
5473
+ border-left-width: 0;
5474
+ border-right: 1px solid hsl(var(--border));
5475
+ }
5476
+ .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
5477
+ border-top: 1px solid hsl(var(--border));
5478
+ }
5479
+ .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
5480
+ padding: 3px 5px;
5481
+ text-align: left;
5482
+ border-bottom: 1px solid hsl(var(--border));
5483
+ }
5484
+ .rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
5485
+ text-align: right;
5486
+ }
5487
+ .rbc-agenda-time-cell {
5488
+ text-transform: lowercase;
5489
+ }
5490
+ .rbc-agenda-time-cell .rbc-continues-after:after {
5491
+ content: " »";
5492
+ }
5493
+ .rbc-agenda-time-cell .rbc-continues-prior:before {
5494
+ content: "« ";
5495
+ }
5496
+ .rbc-agenda-date-cell,
5497
+ .rbc-agenda-time-cell {
5498
+ white-space: nowrap;
5499
+ }
5500
+ .rbc-agenda-event-cell {
5501
+ width: 100%;
5502
+ }
5503
+ .rbc-time-column {
5504
+ display: -webkit-box;
5505
+ display: -ms-flexbox;
5506
+ display: flex;
5507
+ -webkit-box-orient: vertical;
5508
+ -webkit-box-direction: normal;
5509
+ -ms-flex-direction: column;
5510
+ flex-direction: column;
5511
+ min-height: 100%;
5512
+ }
5513
+ .rbc-time-column .rbc-timeslot-group {
5514
+ -webkit-box-flex: 1;
5515
+ -ms-flex: 1;
5516
+ flex: 1;
5517
+ }
5518
+ .rbc-timeslot-group {
5519
+ border-bottom: 1px solid hsl(var(--border));
5520
+ min-height: 40px;
5521
+ display: -webkit-box;
5522
+ display: -ms-flexbox;
5523
+ display: flex;
5524
+ -webkit-box-orient: vertical;
5525
+ -webkit-box-direction: normal;
5526
+ -ms-flex-flow: column nowrap;
5527
+ flex-flow: column nowrap;
5528
+ }
5529
+ .rbc-time-gutter,
5530
+ .rbc-header-gutter {
5531
+ -webkit-box-flex: 0;
5532
+ -ms-flex: none;
5533
+ flex: none;
5534
+ }
5535
+ .rbc-label {
5536
+ padding: 0 5px;
5537
+ }
5538
+ .rbc-day-slot {
5539
+ position: relative;
5540
+ }
5541
+ .rbc-day-slot .rbc-events-container {
5542
+ bottom: 0;
5543
+ left: 0;
5544
+ position: absolute;
5545
+ right: 0;
5546
+ margin-right: 10px;
5547
+ top: 0;
5548
+ }
5549
+ .rbc-day-slot .rbc-events-container.rbc-rtl {
5550
+ left: 10px;
5551
+ right: 0;
5552
+ }
5553
+ .rbc-day-slot .rbc-event,
5554
+ .rbc-day-slot .rbc-background-event {
5555
+ border: 1px solid #265985;
5556
+ display: -webkit-box;
5557
+ display: -ms-flexbox;
5558
+ display: flex;
5559
+ max-height: 100%;
5560
+ min-height: 20px;
5561
+ -webkit-box-orient: vertical;
5562
+ -webkit-box-direction: normal;
5563
+ -ms-flex-flow: column wrap;
5564
+ flex-flow: column wrap;
5565
+ -webkit-box-align: start;
5566
+ -ms-flex-align: start;
5567
+ align-items: flex-start;
5568
+ overflow: hidden;
5569
+ position: absolute;
5570
+ }
5571
+ .rbc-day-slot .rbc-background-event {
5572
+ opacity: 0.75;
5573
+ }
5574
+ .rbc-day-slot .rbc-event-label {
5575
+ -webkit-box-flex: 0;
5576
+ -ms-flex: none;
5577
+ flex: none;
5578
+ padding-right: 5px;
5579
+ width: auto;
5580
+ }
5581
+ .rbc-day-slot .rbc-event-content {
5582
+ width: 100%;
5583
+ -webkit-box-flex: 1;
5584
+ -ms-flex: 1 1 0px;
5585
+ flex: 1 1 0;
5586
+ word-wrap: break-word;
5587
+ line-height: 1;
5588
+ height: 100%;
5589
+ min-height: 1em;
5590
+ }
5591
+ .rbc-day-slot .rbc-time-slot {
5592
+ border-top: 1px solid hsl(var(--border));
5593
+ }
5594
+ .rbc-time-view-resources .rbc-time-gutter,
5595
+ .rbc-time-view-resources .rbc-time-header-gutter {
5596
+ position: sticky;
5597
+ left: 0;
5598
+ background-color: white;
5599
+ border-right: 1px solid hsl(var(--border));
5600
+ z-index: 10;
5601
+ margin-right: -1px;
5602
+ }
5603
+ .rbc-time-view-resources .rbc-time-header {
5604
+ overflow: hidden;
5605
+ }
5606
+ .rbc-time-view-resources .rbc-time-header-content {
5607
+ min-width: auto;
5608
+ -webkit-box-flex: 1;
5609
+ -ms-flex: 1 0 0px;
5610
+ flex: 1 0 0;
5611
+ -ms-flex-preferred-size: 0px;
5612
+ flex-basis: 0px;
5613
+ }
5614
+ .rbc-time-view-resources .rbc-time-header-cell-single-day {
5615
+ display: none;
5616
+ }
5617
+ .rbc-time-view-resources .rbc-day-slot {
5618
+ min-width: 140px;
5619
+ }
5620
+ .rbc-time-view-resources .rbc-header,
5621
+ .rbc-time-view-resources .rbc-day-bg {
5622
+ width: 140px;
5623
+ -webkit-box-flex: 1;
5624
+ -ms-flex: 1 1 0px;
5625
+ flex: 1 1 0;
5626
+ -ms-flex-preferred-size: 0 px;
5627
+ flex-basis: 0 px;
5628
+ }
5629
+ .rbc-time-header-content + .rbc-time-header-content {
5630
+ margin-left: -1px;
5631
+ }
5632
+ .rbc-time-slot {
5633
+ -webkit-box-flex: 1;
5634
+ -ms-flex: 1 0 0px;
5635
+ flex: 1 0 0;
5636
+ }
5637
+ .rbc-time-slot.rbc-now {
5638
+ font-weight: bold;
5639
+ }
5640
+ .rbc-day-header {
5641
+ text-align: center;
5642
+ }
5643
+ .rbc-slot-selection {
5644
+ z-index: 10;
5645
+ position: absolute;
5646
+ background-color: rgba(0, 0, 0, 0.5);
5647
+ color: white;
5648
+ font-size: 75%;
5649
+ width: 100%;
5650
+ padding: 3px;
5651
+ }
5652
+ .rbc-slot-selecting {
5653
+ cursor: move;
5654
+ }
5655
+ .rbc-time-view {
5656
+ display: -webkit-box;
5657
+ display: -ms-flexbox;
5658
+ display: flex;
5659
+ -webkit-box-orient: vertical;
5660
+ -webkit-box-direction: normal;
5661
+ -ms-flex-direction: column;
5662
+ flex-direction: column;
5663
+ -webkit-box-flex: 1;
5664
+ -ms-flex: 1;
5665
+ flex: 1;
5666
+ width: 100%;
5667
+ border: 1px solid hsl(var(--border));
5668
+ min-height: 0;
5669
+ }
5670
+ .rbc-time-view .rbc-time-gutter {
5671
+ white-space: nowrap;
5672
+ text-align: right;
5673
+ }
5674
+ .rbc-time-view .rbc-allday-cell {
5675
+ -webkit-box-sizing: content-box;
5676
+ box-sizing: content-box;
5677
+ width: 100%;
5678
+ height: 100%;
5679
+ position: relative;
5680
+ }
5681
+ .rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
5682
+ border-left: 1px solid hsl(var(--border));
5683
+ }
5684
+ .rbc-time-view .rbc-allday-events {
5685
+ position: relative;
5686
+ z-index: 4;
5687
+ }
5688
+ .rbc-time-view .rbc-row {
5689
+ -webkit-box-sizing: border-box;
5690
+ box-sizing: border-box;
5691
+ min-height: 20px;
5692
+ }
5693
+ .rbc-time-header {
5694
+ display: -webkit-box;
5695
+ display: -ms-flexbox;
5696
+ display: flex;
5697
+ -webkit-box-flex: 0;
5698
+ -ms-flex: 0 0 auto;
5699
+ flex: 0 0 auto;
5700
+ -webkit-box-orient: horizontal;
5701
+ -webkit-box-direction: normal;
5702
+ -ms-flex-direction: row;
5703
+ flex-direction: row;
5704
+ }
5705
+ .rbc-time-header.rbc-overflowing {
5706
+ border-right: 1px solid hsl(var(--border));
5707
+ }
5708
+ .rbc-rtl .rbc-time-header.rbc-overflowing {
5709
+ border-right-width: 0;
5710
+ border-left: 1px solid hsl(var(--border));
5711
+ }
5712
+ .rbc-time-header > .rbc-row:first-child {
5713
+ border-bottom: 1px solid hsl(var(--border));
5714
+ }
5715
+ .rbc-time-header > .rbc-row.rbc-row-resource {
5716
+ border-bottom: 1px solid hsl(var(--border));
5717
+ }
5718
+ .rbc-time-header-cell-single-day {
5719
+ display: none;
5720
+ }
5721
+ .rbc-time-header-content {
5722
+ -webkit-box-flex: 1;
5723
+ -ms-flex: 1;
5724
+ flex: 1;
5725
+ display: -webkit-box;
5726
+ display: -ms-flexbox;
5727
+ display: flex;
5728
+ min-width: 0;
5729
+ -webkit-box-orient: vertical;
5730
+ -webkit-box-direction: normal;
5731
+ -ms-flex-direction: column;
5732
+ flex-direction: column;
5733
+ border-left: 1px solid hsl(var(--border));
5734
+ }
5735
+ .rbc-rtl .rbc-time-header-content {
5736
+ border-left-width: 0;
5737
+ border-right: 1px solid hsl(var(--border));
5738
+ }
5739
+ .rbc-time-header-content > .rbc-row.rbc-row-resource {
5740
+ border-bottom: 1px solid hsl(var(--border));
5741
+ -ms-flex-negative: 0;
5742
+ flex-shrink: 0;
5743
+ }
5744
+ .rbc-time-content {
5745
+ display: -webkit-box;
5746
+ display: -ms-flexbox;
5747
+ display: flex;
5748
+ -webkit-box-flex: 1;
5749
+ -ms-flex: 1 0 0%;
5750
+ flex: 1 0 0%;
5751
+ -webkit-box-align: start;
5752
+ -ms-flex-align: start;
5753
+ align-items: flex-start;
5754
+ width: 100%;
5755
+ border-top: 2px solid hsl(var(--border));
5756
+ overflow-y: auto;
5757
+ position: relative;
5758
+ }
5759
+ .rbc-time-content > .rbc-time-gutter {
5760
+ -webkit-box-flex: 0;
5761
+ -ms-flex: none;
5762
+ flex: none;
5763
+ }
5764
+ .rbc-time-content > * + * > * {
5765
+ border-left: 1px solid hsl(var(--border));
5766
+ }
5767
+ .rbc-rtl .rbc-time-content > * + * > * {
5768
+ border-left-width: 0;
5769
+ border-right: 1px solid hsl(var(--border));
5770
+ }
5771
+ .rbc-time-content > .rbc-day-slot {
5772
+ width: 100%;
5773
+ -moz-user-select: none;
5774
+ -ms-user-select: none;
5775
+ user-select: none;
5776
+ -webkit-user-select: none;
5777
+ }
5778
+ .rbc-current-time-indicator {
5779
+ position: absolute;
5780
+ z-index: 3;
5781
+ left: 0;
5782
+ right: 0;
5783
+ height: 1px;
5784
+ background-color: #74ad31;
5785
+ pointer-events: none;
5786
+ }
5787
+ .rbc-resource-grouping.rbc-time-header-content {
5788
+ display: -webkit-box;
5789
+ display: -ms-flexbox;
5790
+ display: flex;
5791
+ -webkit-box-orient: vertical;
5792
+ -webkit-box-direction: normal;
5793
+ -ms-flex-direction: column;
5794
+ flex-direction: column;
5795
+ }
5796
+ .rbc-resource-grouping .rbc-row .rbc-header {
5797
+ width: 141px;
5798
+ }
5013
5799
  }
5014
5800
  @property --tw-translate-x {
5015
5801
  syntax: "*";
@@ -5367,4 +6153,4 @@
5367
6153
  --tw-exit-translate-y: 0;
5368
6154
  }
5369
6155
  }
5370
- }
6156
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ikoncomponents",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "css": "dist/styles.css",
@@ -1,19 +0,0 @@
1
- import React from 'react';
2
- export interface ResourceTableProps {
3
- resourceDataWithAllocation: any[];
4
- userMaps: {
5
- userDetailsMap: {
6
- [key: string]: {
7
- name: string;
8
- };
9
- };
10
- rolesMap: {
11
- [key: string]: {
12
- roleId: string;
13
- roleName: string;
14
- };
15
- };
16
- };
17
- monthsRange: string[];
18
- }
19
- export declare const ResourceTable: React.FC<ResourceTableProps>;
@@ -1,89 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- /* eslint-disable react-hooks/preserve-manual-memoization */
3
- import React, { useMemo } from 'react';
4
- import { Button } from "../../shadcn/button";
5
- import { Plus, Trash2 } from 'lucide-react';
6
- import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../shadcn/select";
7
- import { Input } from "../../shadcn/input";
8
- import { DataTable } from '../data-table';
9
- export const ResourceTable = ({ resourceDataWithAllocation, userMaps, monthsRange, }) => {
10
- const [data, setData] = React.useState(resourceDataWithAllocation);
11
- const calculateTotalFTE = (row) => {
12
- if (!row.detailedAllocation)
13
- return 0;
14
- return Object.values(row.detailedAllocation).reduce((sum, value) => sum + (parseFloat(value) || 0), 0);
15
- };
16
- const handleAddResource = (taskId) => {
17
- var _a;
18
- const newResource = {
19
- id: `new-${Date.now()}`,
20
- taskId,
21
- taskName: ((_a = data.find(r => r.taskId === taskId)) === null || _a === void 0 ? void 0 : _a.taskName) || '',
22
- userId: '',
23
- roleId: '',
24
- detailedAllocation: monthsRange.reduce((acc, month) => (Object.assign(Object.assign({}, acc), { [month]: 0 })), {}),
25
- };
26
- setData([...data, newResource]);
27
- };
28
- const handleDeleteResource = (resourceId) => {
29
- setData(data.filter(resource => resource.id !== resourceId));
30
- };
31
- const handleUpdateAllocation = (resourceId, month, value) => {
32
- setData(data.map(resource => {
33
- if (resource.id === resourceId) {
34
- return Object.assign(Object.assign({}, resource), { detailedAllocation: Object.assign(Object.assign({}, resource.detailedAllocation), { [month]: parseFloat(value) || 0 }) });
35
- }
36
- return resource;
37
- }));
38
- };
39
- const columns = useMemo(() => [
40
- {
41
- accessorKey: "taskName",
42
- header: "Task Name",
43
- cell: ({ row }) => row.original.taskName,
44
- },
45
- {
46
- accessorKey: "userId",
47
- header: "Employee Name",
48
- cell: ({ row }) => {
49
- var _a;
50
- return (_jsxs(Select, { value: row.original.userId, onValueChange: (value) => {
51
- setData(data.map(resource => resource.id === row.original.id
52
- ? Object.assign(Object.assign({}, resource), { userId: value }) : resource));
53
- }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select employee", children: ((_a = userMaps.userDetailsMap[row.original.userId]) === null || _a === void 0 ? void 0 : _a.name) || "Select employee" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.userDetailsMap).map(([id, user]) => (_jsx(SelectItem, { value: id, children: user.name }, id))) })] }));
54
- },
55
- },
56
- {
57
- accessorKey: "roleId",
58
- header: "Role",
59
- cell: ({ row }) => {
60
- var _a;
61
- return (_jsxs(Select, { value: row.original.roleId, onValueChange: (value) => {
62
- setData(data.map(resource => resource.id === row.original.id
63
- ? Object.assign(Object.assign({}, resource), { roleId: value }) : resource));
64
- }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select role", children: ((_a = userMaps.rolesMap[row.original.roleId]) === null || _a === void 0 ? void 0 : _a.roleName) || "Select role" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.rolesMap).map(([id, role]) => (_jsx(SelectItem, { value: id, children: role.roleName }, id))) })] }));
65
- },
66
- },
67
- {
68
- accessorKey: "totalFTE",
69
- header: "Total FTE",
70
- cell: ({ row }) => calculateTotalFTE(row.original).toFixed(2),
71
- },
72
- ...monthsRange.map(month => ({
73
- accessorKey: `detailedAllocation.${month}`,
74
- header: month.replace('_', ' '),
75
- cell: ({ row }) => (_jsx(Input, { type: "number", min: "0", max: "1", step: "0.1", value: row.original.detailedAllocation[month] || 0, onChange: (e) => handleUpdateAllocation(row.original.id, month, e.target.value), className: "w-20" })),
76
- })),
77
- {
78
- id: "actions",
79
- cell: ({ row }) => (_jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleAddResource(row.original.taskId), children: _jsx(Plus, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleDeleteResource(row.original.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })),
80
- },
81
- ], [data, monthsRange, userMaps]);
82
- return (_jsx(DataTable, { columns: columns, data: data, extraParams: {
83
- defaultGroups: ["taskName"],
84
- grouping: true,
85
- sorting: true,
86
- header: true,
87
- paginationBar: true,
88
- } }));
89
- };
@@ -1,21 +0,0 @@
1
- import * as React from "react";
2
- interface ResourceTableProps {
3
- resourceDataWithAllocation: any[];
4
- userMaps: UserMaps;
5
- monthsRange: string[];
6
- }
7
- interface UserMaps {
8
- userDetailsMap: {
9
- [key: string]: {
10
- name: string;
11
- };
12
- };
13
- rolesMap: {
14
- [key: string]: {
15
- roleId: string;
16
- roleName: string;
17
- };
18
- };
19
- }
20
- export declare const ResourceTable: React.FC<ResourceTableProps>;
21
- export {};
@@ -1,36 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Card, CardContent } from "../../shadcn/card";
3
- import { Input } from "../../shadcn/input";
4
- import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../shadcn/select";
5
- import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../shadcn/table";
6
- import { ChevronDown, ChevronRight } from "lucide-react";
7
- import * as React from "react";
8
- import { useFormContext } from "react-hook-form";
9
- const groupResourcesByTask = (resources) => {
10
- const groupedMap = resources.reduce((acc, resource) => {
11
- const taskId = resource.taskId;
12
- if (!acc.has(taskId)) {
13
- acc.set(taskId, {
14
- taskId,
15
- taskName: resource.taskName,
16
- resources: []
17
- });
18
- }
19
- acc.get(taskId).resources.push(resource);
20
- return acc;
21
- }, new Map());
22
- return Array.from(groupedMap.values());
23
- };
24
- export const ResourceTable = ({ resourceDataWithAllocation, userMaps, monthsRange }) => {
25
- const { setValue } = useFormContext();
26
- const [expandedTasks, setExpandedTasks] = React.useState(new Set());
27
- const groupedResources = groupResourcesByTask(resourceDataWithAllocation);
28
- const toggleTask = (taskId) => {
29
- setExpandedTasks((prev) => {
30
- const newSet = new Set(prev);
31
- newSet.has(taskId) ? newSet.delete(taskId) : newSet.add(taskId);
32
- return newSet;
33
- });
34
- };
35
- return (_jsx(Card, { className: "p-0 bg-background", children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[300px] py-5", children: "Task Name" }), _jsx(TableHead, { className: "w-[200px] py-5", children: "Employee Name" }), _jsx(TableHead, { className: "w-[200px] py-5", children: "Role" }), monthsRange.map((month) => (_jsx(TableHead, { className: "w-[100px] py-5", children: month.replace("_", " ") }, month)))] }) }), _jsx(TableBody, { children: groupedResources.map((group) => (_jsxs(React.Fragment, { children: [_jsx(TableRow, { className: "cursor-pointer hover:bg-accent", onClick: () => toggleTask(group.taskId), children: _jsx(TableCell, { colSpan: 3 + monthsRange.length, children: _jsxs("div", { className: "flex items-center gap-2", children: [expandedTasks.has(group.taskId) ? _jsx(ChevronDown, { className: "h-4 w-4 text-primary" }) : _jsx(ChevronRight, { className: "h-4 w-4 text-primary" }), _jsx("span", { className: "font-medium", children: group.taskName })] }) }) }), expandedTasks.has(group.taskId) && group.resources.map((resource) => (_jsxs(TableRow, { className: "hover:bg-muted/30", children: [_jsx(TableCell, { className: "pl-8", children: _jsx(Input, { value: resource.taskName, disabled: true, className: "w-full bg-transparent border-0 px-0 disabled:opacity-100" }) }), _jsx(TableCell, { children: _jsxs(Select, { defaultValue: resource.resourceId, children: [_jsx(SelectTrigger, { className: "w-full bg-secondary dark:bg-secondary", children: _jsx(SelectValue, { placeholder: "Select employee" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.userDetailsMap).map(([id, user]) => (_jsx(SelectItem, { value: id, children: user.name }, id))) })] }) }), _jsx(TableCell, { children: _jsxs(Select, { defaultValue: resource.gradeId.toString(), children: [_jsx(SelectTrigger, { className: "w-full bg-secondary dark:bg-secondary", children: _jsx(SelectValue, { placeholder: "Select role" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.rolesMap).map(([id, role]) => (_jsx(SelectItem, { value: id, children: role.roleName }, id))) })] }) }), monthsRange.map((month) => (_jsx(TableCell, { children: _jsx(Input, { type: "number", min: "0", max: "1", step: "0.01", defaultValue: resource.allocation[month] || 0, className: "w-20" }) }, month)))] }, `${resource.taskId}-${resource.resourceId}`)))] }, group.taskId))) })] }) }) }));
36
- };