ikoncomponents 1.2.2 → 1.2.3

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/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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ikoncomponents",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
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
- };