Skip to content

Commit 5e311fb

Browse files
silviyabotevasilviyaboteva
committed
chore: add teams page
1 parent 8712e78 commit 5e311fb

File tree

1 file changed

+304
-1
lines changed

1 file changed

+304
-1
lines changed

‎examples/kendo-react-freemium/src/pages/TeamManagement.tsx‎

Lines changed: 304 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,310 @@
1+
import { Layout } from "@progress/kendo-drawing";
2+
import { ButtonGroup, Button, ChipList, Chip, ChipProps, ChipListChangeEvent } from "@progress/kendo-react-buttons";
3+
import { SvgIcon } from "@progress/kendo-react-common";
4+
import { Breadcrumb, Card, CardBody, Avatar, CardTitle, CardSubtitle, CardFooter, BreadcrumbLinkMouseEvent, StackLayout } from "@progress/kendo-react-layout";
5+
import { checkIcon, chevronRightIcon, groupIcon, homeIcon, listUnorderedSquareIcon } from "@progress/kendo-svg-icons";
6+
import React from "react";
7+
import { useNavigate } from "react-router-dom";
8+
9+
interface DataModel {
10+
id: string;
11+
text?: string;
12+
icon?: React.ReactNode;
13+
}
14+
15+
const breadcrumbItems: DataModel[] = [
16+
{
17+
id: "home",
18+
icon: <SvgIcon icon={homeIcon} />,
19+
},
20+
{
21+
id: "team-management",
22+
text: "Team Management",
23+
}
24+
];
25+
26+
const teams = [
27+
{ text: "All", value: 'all', disabled: false },
28+
{ text: "Technology and Developement", value: 'technology', disabled: true },
29+
{ text: "Product and Design", value: 'product', disabled: true },
30+
{ text: "Business Operation", value: 'business', disabled: true },
31+
{ text: "Marketing and Sales", value: 'marketing', disabled: true },
32+
];
33+
134
export default function TeamManagement() {
35+
const navigate = useNavigate();
36+
const [chipValue, setChipValue] = React.useState<string[]>(['All']);
37+
const [isGridView, setIsGridView] = React.useState(true);
38+
39+
const handleItemSelect = (e: BreadcrumbLinkMouseEvent) => {
40+
if (e.id === 'home') {
41+
navigate('/');
42+
}
43+
}
44+
45+
const handleChipValueChange = (event: ChipListChangeEvent) => {
46+
setChipValue(event.value);
47+
};
48+
49+
const handleViewChange = (view: 'grid' | 'list') => {
50+
if (view === 'grid') {
51+
setIsGridView(true);
52+
} else {
53+
setIsGridView(false);
54+
}
55+
};
56+
257
return (
358
<>
4-
TeamManagement
59+
<div style={{minHeight: 'calc(100vh - 106px)'}} className="flex flex-col p-10 gap-6">
60+
<Breadcrumb data={breadcrumbItems} onItemSelect={handleItemSelect} className="!bg-app-surface" />
61+
62+
<div>
63+
<h1 className="text-4xl">Team Management</h1>
64+
<h5 className="text-subtle">18 teams</h5>
65+
</div>
66+
67+
<div className="flex justify-between items-start gap-6">
68+
<ButtonGroup>
69+
<Button svgIcon={groupIcon} togglable={true} selected={isGridView}
70+
onClick={() => handleViewChange('grid')} />
71+
<Button svgIcon={listUnorderedSquareIcon} togglable={true} selected={!isGridView}
72+
onClick={() => handleViewChange('list')} />
73+
</ButtonGroup>
74+
<ChipList className="justify-end" data={teams} selection="multiple" onChange={handleChipValueChange} value={chipValue}
75+
chip={(props: ChipProps) => (
76+
<Chip
77+
{...props}
78+
selected={!props.dataItem.disabled}
79+
selectedSvgIcon={checkIcon}
80+
fillMode="outline"
81+
/>
82+
)} />
83+
</div>
84+
85+
<StackLayout className={`grid grid-cols-${isGridView ? 2 : 1} lg:grid-cols-${isGridView ? 4 : 1}`} orientation="horizontal" style={{gap: "var(--kendo-spacing-4) var(--kendo-spacing-6)"}}>
86+
<Card>
87+
<CardBody className="flex items-center">
88+
<Avatar className="bg-[#9C38FF]">FE</Avatar>
89+
<div className="overflow-hidden">
90+
<CardTitle className="font-medium truncate">Frontend team</CardTitle>
91+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
92+
</div>
93+
</CardBody>
94+
<CardFooter className="border-0 p-2">
95+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
96+
</CardFooter>
97+
</Card>
98+
<Card>
99+
<CardBody className="flex items-center">
100+
<Avatar className="bg-[#800000]">BE</Avatar>
101+
<div className="overflow-hidden">
102+
<CardTitle className="font-medium truncate">Backend Team</CardTitle>
103+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
104+
</div>
105+
</CardBody>
106+
<CardFooter className="border-0 p-2">
107+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
108+
</CardFooter>
109+
</Card>
110+
<Card>
111+
<CardBody className="flex items-center">
112+
<Avatar className="bg-[#333333]">DO</Avatar>
113+
<div className="overflow-hidden">
114+
<CardTitle className="font-medium truncate">DevOps Team</CardTitle>
115+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
116+
</div>
117+
</CardBody>
118+
<CardFooter className="border-0 p-2">
119+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
120+
</CardFooter>
121+
</Card>
122+
<Card>
123+
<CardBody className="flex items-center">
124+
<Avatar className="bg-[#218247]">QA</Avatar>
125+
<div className="overflow-hidden">
126+
<CardTitle className="font-medium truncate">QA Team</CardTitle>
127+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
128+
</div>
129+
</CardBody>
130+
<CardFooter className="border-0 p-2">
131+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
132+
</CardFooter>
133+
</Card>
134+
<Card>
135+
<CardBody className="flex items-center">
136+
<Avatar className="bg-[#DB0000]">UX</Avatar>
137+
<div className="overflow-hidden">
138+
<CardTitle className="font-medium truncate">UX/UI Design Team</CardTitle>
139+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
140+
</div>
141+
</CardBody>
142+
<CardFooter className="border-0 p-2">
143+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
144+
</CardFooter>
145+
</Card>
146+
<Card>
147+
<CardBody className="flex items-center">
148+
<Avatar className="bg-[#8F7200]">DB</Avatar>
149+
<div className="overflow-hidden">
150+
<CardTitle className="font-medium truncate">Database Team</CardTitle>
151+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
152+
</div>
153+
</CardBody>
154+
<CardFooter className="border-0 p-2">
155+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
156+
</CardFooter>
157+
</Card>
158+
<Card>
159+
<CardBody className="flex items-center">
160+
<Avatar className="bg-[#008B8B]">М</Avatar>
161+
<div className="overflow-hidden">
162+
<CardTitle className="font-medium truncate">Marketing Team</CardTitle>
163+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
164+
</div>
165+
</CardBody>
166+
<CardFooter className="border-0 p-2">
167+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
168+
</CardFooter>
169+
</Card>
170+
<Card>
171+
<CardBody className="flex items-center">
172+
<Avatar className="bg-[#C14E34]">PM</Avatar>
173+
<div className="overflow-hidden">
174+
<CardTitle className="font-medium truncate">Product Management Team</CardTitle>
175+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
176+
</div>
177+
</CardBody>
178+
<CardFooter className="border-0 p-2">
179+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
180+
</CardFooter>
181+
</Card>
182+
<Card>
183+
<CardBody className="flex items-center">
184+
<Avatar className="bg-[#027EB5]">TS</Avatar>
185+
<div className="overflow-hidden">
186+
<CardTitle className="font-medium truncate">Technical Support Team</CardTitle>
187+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
188+
</div>
189+
</CardBody>
190+
<CardFooter className="border-0 p-2">
191+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
192+
</CardFooter>
193+
</Card>
194+
<Card>
195+
<CardBody className="flex items-center">
196+
<Avatar className="bg-[#267B92]">S</Avatar>
197+
<div className="overflow-hidden">
198+
<CardTitle className="font-medium truncate">Security Team</CardTitle>
199+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
200+
</div>
201+
</CardBody>
202+
<CardFooter className="border-0 p-2">
203+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
204+
</CardFooter>
205+
</Card>
206+
<Card>
207+
<CardBody className="flex items-center">
208+
<Avatar className="bg-[#708090]">DS</Avatar>
209+
<div className="overflow-hidden">
210+
<CardTitle className="font-medium truncate">Data Science Team</CardTitle>
211+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
212+
</div>
213+
</CardBody>
214+
<CardFooter className="border-0 p-2">
215+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
216+
</CardFooter>
217+
</Card>
218+
<Card>
219+
<CardBody className="flex items-center">
220+
<Avatar className="bg-[#191970]">IE</Avatar>
221+
<div className="overflow-hidden">
222+
<CardTitle className="font-medium truncate">Infrastructure Engineering</CardTitle>
223+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
224+
</div>
225+
</CardBody>
226+
<CardFooter className="border-0 p-2">
227+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
228+
</CardFooter>
229+
</Card>
230+
<Card>
231+
<CardBody className="flex items-center">
232+
<Avatar className="bg-[#7B3F00]">RD</Avatar>
233+
<div className="overflow-hidden">
234+
<CardTitle className="font-medium truncate">Research and Development </CardTitle>
235+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
236+
</div>
237+
</CardBody>
238+
<CardFooter className="border-0 p-2">
239+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
240+
</CardFooter>
241+
</Card>
242+
<Card>
243+
<CardBody className="flex items-center">
244+
<Avatar className="bg-[#607F1F]">BA</Avatar>
245+
<div className="overflow-hidden">
246+
<CardTitle className="font-medium truncate">FBusiness Analysis Team </CardTitle>
247+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
248+
</div>
249+
</CardBody>
250+
<CardFooter className="border-0 p-2">
251+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
252+
</CardFooter>
253+
</Card>
254+
<Card>
255+
<CardBody className="flex items-center">
256+
<Avatar className="bg-[#DC147F]">TW</Avatar>
257+
<div className="overflow-hidden">
258+
<CardTitle className="font-medium truncate">Technical Writing Team</CardTitle>
259+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
260+
</div>
261+
</CardBody>
262+
<CardFooter className="border-0 p-2">
263+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
264+
</CardFooter>
265+
</Card>
266+
<Card>
267+
<CardBody className="flex items-center">
268+
<Avatar className="bg-[#5769D2]">S</Avatar>
269+
<div className="overflow-hidden">
270+
<CardTitle className="font-medium truncate">Sales Team</CardTitle>
271+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
272+
</div>
273+
</CardBody>
274+
<CardFooter className="border-0 p-2">
275+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
276+
</CardFooter>
277+
</Card>
278+
<Card>
279+
<CardBody className="flex items-center">
280+
<Avatar className="bg-[#4682B4]">SA</Avatar>
281+
<div className="overflow-hidden">
282+
<CardTitle className="font-medium truncate">System Administration</CardTitle>
283+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
284+
</div>
285+
</CardBody>
286+
<CardFooter className="border-0 p-2">
287+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
288+
</CardFooter>
289+
</Card>
290+
<Card>
291+
<CardBody className="flex items-center">
292+
<Avatar className="bg-[#4B0082]">CG</Avatar>
293+
<div className="overflow-hidden">
294+
<CardTitle className="font-medium truncate">Compliance and Governance</CardTitle>
295+
<CardSubtitle className="text-subtle m-0 truncate">10 members</CardSubtitle>
296+
</div>
297+
</CardBody>
298+
<CardFooter className="border-0 p-2">
299+
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
300+
</CardFooter>
301+
</Card>
302+
</StackLayout>
303+
304+
</div>
305+
<div className="bg-surface-alt color-subtle p-2 text-center">
306+
<span>Copyright &#169; 2025 Progress Software. All rights reserved.</span>
307+
</div>
5308
</>
6309
)
7310
}

0 commit comments

Comments
 (0)