@esic-lab/data-core-ui 0.0.85 → 0.0.87

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.
package/dist/index.css CHANGED
@@ -339,6 +339,24 @@
339
339
  .z-50 {
340
340
  z-index: 50;
341
341
  }
342
+ .container {
343
+ width: 100%;
344
+ @media (width >= 40rem) {
345
+ max-width: 40rem;
346
+ }
347
+ @media (width >= 48rem) {
348
+ max-width: 48rem;
349
+ }
350
+ @media (width >= 64rem) {
351
+ max-width: 64rem;
352
+ }
353
+ @media (width >= 80rem) {
354
+ max-width: 80rem;
355
+ }
356
+ @media (width >= 96rem) {
357
+ max-width: 96rem;
358
+ }
359
+ }
342
360
  .mx-2 {
343
361
  margin-inline: calc(var(--spacing) * 2);
344
362
  }
@@ -1297,6 +1315,15 @@
1297
1315
  var(--tw-ring-shadow),
1298
1316
  var(--tw-shadow);
1299
1317
  }
1318
+ .ring {
1319
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1320
+ box-shadow:
1321
+ var(--tw-inset-shadow),
1322
+ var(--tw-inset-ring-shadow),
1323
+ var(--tw-ring-offset-shadow),
1324
+ var(--tw-ring-shadow),
1325
+ var(--tw-shadow);
1326
+ }
1300
1327
  .outline {
1301
1328
  outline-style: var(--tw-outline-style);
1302
1329
  outline-width: 1px;
package/dist/index.js CHANGED
@@ -4339,6 +4339,11 @@ function ProfileSelect({
4339
4339
  {}
4340
4340
  );
4341
4341
  }, [filteredUnassigned]);
4342
+ const groupedEntries = (0, import_react19.useMemo)(() => {
4343
+ return Object.entries(groupedUsers).sort(
4344
+ ([a], [b]) => a.localeCompare(b, "th")
4345
+ );
4346
+ }, [groupedUsers]);
4342
4347
  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: containerRef, className: "relative body-1", children: [
4343
4348
  mode === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
4344
4349
  import_icons_react14.IconUsers,
@@ -4551,54 +4556,52 @@ function ProfileSelect({
4551
4556
  ghost: true,
4552
4557
  size: "small",
4553
4558
  className: "[&_.ant-collapse-content-box]:!py-[2px]",
4554
- items: Object.entries(groupedUsers).map(
4555
- ([company, users], index) => ({
4556
- key: index.toString(),
4557
- label: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
4558
- "span",
4559
- {
4560
- className: "font-semibold body-3 line-clamp-1",
4561
- title: `${company} (${users.length})`,
4562
- children: [
4563
- company,
4564
- " (",
4565
- users.length,
4566
- ")"
4567
- ]
4568
- }
4569
- ),
4570
- children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col gap-1 pl-2", children: users.map((user) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
4571
- "button",
4572
- {
4573
- className: "flex items-center hover:bg-gray-100 cursor-pointer w-full p-1 rounded text-left",
4574
- onClick: () => onUpdateAssignUser(user, "add"),
4575
- children: [
4576
- /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "relative cursor-pointer flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
4577
- "img",
4578
- {
4579
- src: user.profile,
4580
- style: {
4581
- width: avatarSize,
4582
- height: avatarSize,
4583
- borderRadius: "50%"
4584
- },
4585
- className: "border object-cover"
4586
- }
4587
- ) }),
4588
- /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
4589
- "span",
4590
- {
4591
- className: "ml-2 body-3 line-clamp-1",
4592
- title: user.name,
4593
- children: user.name
4594
- }
4595
- )
4596
- ]
4597
- },
4598
- user.id
4599
- )) })
4600
- })
4601
- )
4559
+ items: groupedEntries.map(([company, users]) => ({
4560
+ key: company,
4561
+ label: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
4562
+ "span",
4563
+ {
4564
+ className: "font-semibold body-3 line-clamp-1",
4565
+ title: `${company} (${users.length})`,
4566
+ children: [
4567
+ company,
4568
+ " (",
4569
+ users.length,
4570
+ ")"
4571
+ ]
4572
+ }
4573
+ ),
4574
+ children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col gap-1 pl-2", children: users.map((user) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
4575
+ "button",
4576
+ {
4577
+ className: "flex items-center hover:bg-gray-100 cursor-pointer w-full p-1 rounded text-left",
4578
+ onClick: () => onUpdateAssignUser(user, "add"),
4579
+ children: [
4580
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "relative cursor-pointer flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
4581
+ "img",
4582
+ {
4583
+ src: user.profile,
4584
+ style: {
4585
+ width: avatarSize,
4586
+ height: avatarSize,
4587
+ borderRadius: "50%"
4588
+ },
4589
+ className: "border object-cover"
4590
+ }
4591
+ ) }),
4592
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
4593
+ "span",
4594
+ {
4595
+ className: "ml-2 body-3 line-clamp-1",
4596
+ title: user.name,
4597
+ children: user.name
4598
+ }
4599
+ )
4600
+ ]
4601
+ },
4602
+ user.id
4603
+ )) })
4604
+ }))
4602
4605
  }
4603
4606
  )
4604
4607
  )
@@ -5175,18 +5178,31 @@ var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
5175
5178
  },
5176
5179
  className: "body-1 grid grid-cols-[1fr_100px_130px] px-8 gap-2",
5177
5180
  children: [
5178
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`, children: [
5179
- mode === "project" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
5180
- "div",
5181
- {
5182
- style: {
5183
- backgroundColor: element.color || "#E9E9E9"
5184
- },
5185
- className: "w-[10px] h-[10px] rounded-full"
5186
- }
5187
- ),
5188
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "line-clamp-1 break-words text-[#333]", title: element.label, children: element.label })
5189
- ] }),
5181
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
5182
+ "div",
5183
+ {
5184
+ className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`,
5185
+ children: [
5186
+ mode === "project" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
5187
+ "div",
5188
+ {
5189
+ style: {
5190
+ backgroundColor: element.color || "#E9E9E9"
5191
+ },
5192
+ className: "w-[10px] h-[10px] rounded-full"
5193
+ }
5194
+ ),
5195
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
5196
+ "div",
5197
+ {
5198
+ className: "line-clamp-1 break-words text-[#333]",
5199
+ title: element.label,
5200
+ children: element.label
5201
+ }
5202
+ )
5203
+ ]
5204
+ }
5205
+ ),
5190
5206
  mode === "project" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: safeEndDate ? (0, import_date_fns3.format)(toBuddhistDate(safeEndDate), "dd MMM yyyy", { locale: import_locale3.th }) : "-" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children: `Q${(0, import_date_fns3.getQuarter)(
5191
5207
  safeEndDate ?? /* @__PURE__ */ new Date()
5192
5208
  )}/${(safeEndDate?.getFullYear() ?? 0) + 543}` }),
@@ -5264,10 +5280,10 @@ var GanttChart = ({
5264
5280
  svg.selectAll("*").remove();
5265
5281
  const chartGroup = svg.append("g").attr("transform", `translate(${margin.left}, ${totalHeaderHeight})`);
5266
5282
  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
5267
- const domainStart = (0, import_date_fns3.startOfDay)((0, import_date_fns3.startOfYear)(new Date(currentYear, 0, 1)));
5268
- const domainEnd = (0, import_date_fns3.startOfDay)(
5269
- (0, import_date_fns3.addDays)((0, import_date_fns3.endOfYear)(new Date(currentYear, 0, 1)), 1)
5283
+ const domainStart = (0, import_date_fns3.startOfDay)(
5284
+ (0, import_date_fns3.startOfYear)(new Date(currentYear, -1, 9, 1))
5270
5285
  );
5286
+ const domainEnd = (0, import_date_fns3.startOfDay)(new Date(currentYear, 9, 1));
5271
5287
  const xScale = d33.scaleTime().domain([domainStart, domainEnd]).range([0, containerWidth - margin.left - margin.right]);
5272
5288
  const buildTimeBuckets = (domain) => ({
5273
5289
  uniqueYears: d33.timeYear.every(1)?.range(domain[0], domain[1]) || [],
@@ -5282,14 +5298,16 @@ var GanttChart = ({
5282
5298
  ) || []
5283
5299
  });
5284
5300
  const renderYearHeaders = (layer1, layer2, layer3, newXScale, buckets) => {
5285
- layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d)).attr("y", -totalHeaderHeight).attr("width", (d) => {
5286
- const nextYearStart = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear() + 1, 0, 1));
5287
- return newXScale(nextYearStart) - newXScale(d);
5301
+ layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d) - (newXScale(d) - newXScale((0, import_date_fns3.startOfDay)(new Date(d.getFullYear() - 1, 9, 1))))).attr("y", -totalHeaderHeight).attr("width", (d) => {
5302
+ const start = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear() - 1, 9, 1));
5303
+ const end = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear(), 9, 1));
5304
+ return newXScale(end) - newXScale(start);
5288
5305
  }).attr("height", headersGroupLayer1Height).style("fill", "#fff").style("stroke", "#E9E9E9").style("stroke-width", 1);
5289
5306
  layer1.selectAll(".year-label").data(buckets.uniqueYears).enter().append("text").attr("class", "year-label").attr("x", (d) => {
5290
- const nextYear = new Date(d.getFullYear() + 1, 0, 1);
5291
- return newXScale(d) + (newXScale(nextYear) - newXScale(d)) / 2;
5292
- }).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1 + 2}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `${d.getFullYear() + 543}`);
5307
+ const start = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear() - 1, 9, 1));
5308
+ const end = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear(), 9, 1));
5309
+ return newXScale(start) + (newXScale(end) - newXScale(start)) / 2;
5310
+ }).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1 + 2}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `\u0E1B\u0E35\u0E07\u0E1A\u0E1B\u0E23\u0E30\u0E21\u0E32\u0E13 ${d.getFullYear() + 543}`);
5293
5311
  const quarters2 = [];
5294
5312
  buckets.uniqueYears.forEach((year) => {
5295
5313
  for (let q = 0; q < 4; q++) {
package/dist/index.mjs CHANGED
@@ -4273,6 +4273,11 @@ function ProfileSelect({
4273
4273
  {}
4274
4274
  );
4275
4275
  }, [filteredUnassigned]);
4276
+ const groupedEntries = useMemo2(() => {
4277
+ return Object.entries(groupedUsers).sort(
4278
+ ([a], [b]) => a.localeCompare(b, "th")
4279
+ );
4280
+ }, [groupedUsers]);
4276
4281
  return /* @__PURE__ */ jsxs34("div", { ref: containerRef, className: "relative body-1", children: [
4277
4282
  mode === "icon" ? /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsx43(
4278
4283
  IconUsers,
@@ -4485,54 +4490,52 @@ function ProfileSelect({
4485
4490
  ghost: true,
4486
4491
  size: "small",
4487
4492
  className: "[&_.ant-collapse-content-box]:!py-[2px]",
4488
- items: Object.entries(groupedUsers).map(
4489
- ([company, users], index) => ({
4490
- key: index.toString(),
4491
- label: /* @__PURE__ */ jsxs34(
4492
- "span",
4493
- {
4494
- className: "font-semibold body-3 line-clamp-1",
4495
- title: `${company} (${users.length})`,
4496
- children: [
4497
- company,
4498
- " (",
4499
- users.length,
4500
- ")"
4501
- ]
4502
- }
4503
- ),
4504
- children: /* @__PURE__ */ jsx43("div", { className: "flex flex-col gap-1 pl-2", children: users.map((user) => /* @__PURE__ */ jsxs34(
4505
- "button",
4506
- {
4507
- className: "flex items-center hover:bg-gray-100 cursor-pointer w-full p-1 rounded text-left",
4508
- onClick: () => onUpdateAssignUser(user, "add"),
4509
- children: [
4510
- /* @__PURE__ */ jsx43("div", { className: "relative cursor-pointer flex-shrink-0", children: /* @__PURE__ */ jsx43(
4511
- "img",
4512
- {
4513
- src: user.profile,
4514
- style: {
4515
- width: avatarSize,
4516
- height: avatarSize,
4517
- borderRadius: "50%"
4518
- },
4519
- className: "border object-cover"
4520
- }
4521
- ) }),
4522
- /* @__PURE__ */ jsx43(
4523
- "span",
4524
- {
4525
- className: "ml-2 body-3 line-clamp-1",
4526
- title: user.name,
4527
- children: user.name
4528
- }
4529
- )
4530
- ]
4531
- },
4532
- user.id
4533
- )) })
4534
- })
4535
- )
4493
+ items: groupedEntries.map(([company, users]) => ({
4494
+ key: company,
4495
+ label: /* @__PURE__ */ jsxs34(
4496
+ "span",
4497
+ {
4498
+ className: "font-semibold body-3 line-clamp-1",
4499
+ title: `${company} (${users.length})`,
4500
+ children: [
4501
+ company,
4502
+ " (",
4503
+ users.length,
4504
+ ")"
4505
+ ]
4506
+ }
4507
+ ),
4508
+ children: /* @__PURE__ */ jsx43("div", { className: "flex flex-col gap-1 pl-2", children: users.map((user) => /* @__PURE__ */ jsxs34(
4509
+ "button",
4510
+ {
4511
+ className: "flex items-center hover:bg-gray-100 cursor-pointer w-full p-1 rounded text-left",
4512
+ onClick: () => onUpdateAssignUser(user, "add"),
4513
+ children: [
4514
+ /* @__PURE__ */ jsx43("div", { className: "relative cursor-pointer flex-shrink-0", children: /* @__PURE__ */ jsx43(
4515
+ "img",
4516
+ {
4517
+ src: user.profile,
4518
+ style: {
4519
+ width: avatarSize,
4520
+ height: avatarSize,
4521
+ borderRadius: "50%"
4522
+ },
4523
+ className: "border object-cover"
4524
+ }
4525
+ ) }),
4526
+ /* @__PURE__ */ jsx43(
4527
+ "span",
4528
+ {
4529
+ className: "ml-2 body-3 line-clamp-1",
4530
+ title: user.name,
4531
+ children: user.name
4532
+ }
4533
+ )
4534
+ ]
4535
+ },
4536
+ user.id
4537
+ )) })
4538
+ }))
4536
4539
  }
4537
4540
  )
4538
4541
  )
@@ -5007,7 +5010,6 @@ import {
5007
5010
  format as format4,
5008
5011
  eachWeekOfInterval,
5009
5012
  startOfYear,
5010
- endOfYear,
5011
5013
  startOfDay,
5012
5014
  addDays,
5013
5015
  eachHourOfInterval,
@@ -5123,18 +5125,31 @@ var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
5123
5125
  },
5124
5126
  className: "body-1 grid grid-cols-[1fr_100px_130px] px-8 gap-2",
5125
5127
  children: [
5126
- /* @__PURE__ */ jsxs39("div", { className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`, children: [
5127
- mode === "project" && /* @__PURE__ */ jsx48(
5128
- "div",
5129
- {
5130
- style: {
5131
- backgroundColor: element.color || "#E9E9E9"
5132
- },
5133
- className: "w-[10px] h-[10px] rounded-full"
5134
- }
5135
- ),
5136
- /* @__PURE__ */ jsx48("div", { className: "line-clamp-1 break-words text-[#333]", title: element.label, children: element.label })
5137
- ] }),
5128
+ /* @__PURE__ */ jsxs39(
5129
+ "div",
5130
+ {
5131
+ className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`,
5132
+ children: [
5133
+ mode === "project" && /* @__PURE__ */ jsx48(
5134
+ "div",
5135
+ {
5136
+ style: {
5137
+ backgroundColor: element.color || "#E9E9E9"
5138
+ },
5139
+ className: "w-[10px] h-[10px] rounded-full"
5140
+ }
5141
+ ),
5142
+ /* @__PURE__ */ jsx48(
5143
+ "div",
5144
+ {
5145
+ className: "line-clamp-1 break-words text-[#333]",
5146
+ title: element.label,
5147
+ children: element.label
5148
+ }
5149
+ )
5150
+ ]
5151
+ }
5152
+ ),
5138
5153
  mode === "project" ? /* @__PURE__ */ jsx48("div", { children: safeEndDate ? format4(toBuddhistDate(safeEndDate), "dd MMM yyyy", { locale: th }) : "-" }) : /* @__PURE__ */ jsx48("div", { children: `Q${getQuarter(
5139
5154
  safeEndDate ?? /* @__PURE__ */ new Date()
5140
5155
  )}/${(safeEndDate?.getFullYear() ?? 0) + 543}` }),
@@ -5212,10 +5227,10 @@ var GanttChart = ({
5212
5227
  svg.selectAll("*").remove();
5213
5228
  const chartGroup = svg.append("g").attr("transform", `translate(${margin.left}, ${totalHeaderHeight})`);
5214
5229
  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
5215
- const domainStart = startOfDay(startOfYear(new Date(currentYear, 0, 1)));
5216
- const domainEnd = startOfDay(
5217
- addDays(endOfYear(new Date(currentYear, 0, 1)), 1)
5230
+ const domainStart = startOfDay(
5231
+ startOfYear(new Date(currentYear, -1, 9, 1))
5218
5232
  );
5233
+ const domainEnd = startOfDay(new Date(currentYear, 9, 1));
5219
5234
  const xScale = d33.scaleTime().domain([domainStart, domainEnd]).range([0, containerWidth - margin.left - margin.right]);
5220
5235
  const buildTimeBuckets = (domain) => ({
5221
5236
  uniqueYears: d33.timeYear.every(1)?.range(domain[0], domain[1]) || [],
@@ -5230,14 +5245,16 @@ var GanttChart = ({
5230
5245
  ) || []
5231
5246
  });
5232
5247
  const renderYearHeaders = (layer1, layer2, layer3, newXScale, buckets) => {
5233
- layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d)).attr("y", -totalHeaderHeight).attr("width", (d) => {
5234
- const nextYearStart = startOfDay(new Date(d.getFullYear() + 1, 0, 1));
5235
- return newXScale(nextYearStart) - newXScale(d);
5248
+ layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d) - (newXScale(d) - newXScale(startOfDay(new Date(d.getFullYear() - 1, 9, 1))))).attr("y", -totalHeaderHeight).attr("width", (d) => {
5249
+ const start = startOfDay(new Date(d.getFullYear() - 1, 9, 1));
5250
+ const end = startOfDay(new Date(d.getFullYear(), 9, 1));
5251
+ return newXScale(end) - newXScale(start);
5236
5252
  }).attr("height", headersGroupLayer1Height).style("fill", "#fff").style("stroke", "#E9E9E9").style("stroke-width", 1);
5237
5253
  layer1.selectAll(".year-label").data(buckets.uniqueYears).enter().append("text").attr("class", "year-label").attr("x", (d) => {
5238
- const nextYear = new Date(d.getFullYear() + 1, 0, 1);
5239
- return newXScale(d) + (newXScale(nextYear) - newXScale(d)) / 2;
5240
- }).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1 + 2}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `${d.getFullYear() + 543}`);
5254
+ const start = startOfDay(new Date(d.getFullYear() - 1, 9, 1));
5255
+ const end = startOfDay(new Date(d.getFullYear(), 9, 1));
5256
+ return newXScale(start) + (newXScale(end) - newXScale(start)) / 2;
5257
+ }).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1 + 2}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `\u0E1B\u0E35\u0E07\u0E1A\u0E1B\u0E23\u0E30\u0E21\u0E32\u0E13 ${d.getFullYear() + 543}`);
5241
5258
  const quarters2 = [];
5242
5259
  buckets.uniqueYears.forEach((year) => {
5243
5260
  for (let q = 0; q < 4; q++) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esic-lab/data-core-ui",
3
- "version": "0.0.85",
3
+ "version": "0.0.87",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",