Skip to content

Commit 07093ac

Browse files
silviyabotevasilviyaboteva
committed
chore: add single team page
1 parent 373f08f commit 07093ac

File tree

4 files changed

+446
-142
lines changed

4 files changed

+446
-142
lines changed

‎examples/kendo-react-freemium/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Home from "./pages/Home";
66
import Projects from "./pages/Projects";
77
import Tasks from "./pages/Tasks";
88
import Settings from "./pages/Settings";
9+
import Team from "./pages/Team";
910

1011
export default function App() {
1112
return (
@@ -18,6 +19,7 @@ export default function App() {
1819
<Route path="/projects" element={<Projects />} />
1920
<Route path="/tasks" element={<Tasks />} />
2021
<Route path="/team-management" element={<TeamManagement />} />
22+
<Route path="/team-management/:teamId" element={<Team />} />
2123
<Route path="/settings" element={<Settings />} />
2224
</Routes>
2325
</DrawerComponent>

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { useParams } from "react-router";
2+
import { useNavigate } from "react-router-dom";
3+
import { teamsData } from "./data";
4+
import { ButtonGroup, Button, ChipList, ChipProps, Chip, FloatingActionButton } from "@progress/kendo-react-buttons";
5+
import { Breadcrumb, StackLayout, Card, CardBody, Avatar, CardTitle, CardSubtitle, CardFooter, BreadcrumbLinkMouseEvent } from "@progress/kendo-react-layout";
6+
import { groupIcon, listUnorderedSquareIcon, checkIcon, chevronRightIcon, homeIcon, detailSectionIcon, pencilIcon, plusIcon } from "@progress/kendo-svg-icons";
7+
import { SvgIcon } from "@progress/kendo-react-common";
8+
import React from "react";
9+
10+
interface DataModel {
11+
id: string;
12+
text?: string;
13+
icon?: React.ReactNode;
14+
}
15+
16+
export default function Team() {
17+
let params = useParams();
18+
const navigate = useNavigate();
19+
const [isGridView, setIsGridView] = React.useState(true);
20+
const team = teamsData.filter(team => team.teamCode === params.teamId)[0];
21+
22+
const breadcrumbItems: DataModel[] = [
23+
{
24+
id: "home",
25+
icon: <SvgIcon icon={homeIcon} />,
26+
},
27+
{
28+
id: "team-management",
29+
text: "Team Management",
30+
},
31+
{
32+
id: `${params.teamId}`,
33+
text: `${teamsData.filter(team => team.teamCode === params.teamId)[0].teamName}`,
34+
}
35+
];
36+
37+
const handleItemSelect = (e: BreadcrumbLinkMouseEvent) => {
38+
if (e.id === 'home') {
39+
navigate('/');
40+
} else if (e.id === 'team-management') {
41+
navigate('/team-management');
42+
}
43+
}
44+
45+
const handleViewChange = (view: 'grid' | 'list') => {
46+
if (view === 'grid') {
47+
setIsGridView(true);
48+
} else {
49+
setIsGridView(false);
50+
}
51+
};
52+
53+
const getInitials = (fullName: string) => {
54+
const nameParts = fullName.split(" ");
55+
const firstNameInitial = nameParts[0].charAt(0).toUpperCase();
56+
const lastNameInitial = nameParts[1].charAt(0).toUpperCase();
57+
return firstNameInitial + lastNameInitial;
58+
}
59+
60+
return (
61+
<>
62+
<div style={{minHeight: 'calc(100vh - 106px)'}} className="flex flex-col p-10 gap-6">
63+
<Breadcrumb data={breadcrumbItems} onItemSelect={handleItemSelect} className="!bg-app-surface" />
64+
65+
<div>
66+
<h1 className="text-4xl">{teamsData.map(team => { return team.teamCode === params.teamId ? team.teamName : '' })}</h1>
67+
<h5 className="text-subtle">{teamsData.map(team => { return team.teamCode === params.teamId ? team.teamMembers.length : '' })} team members</h5>
68+
</div>
69+
70+
<div className="flex justify-between items-start gap-6">
71+
<ButtonGroup>
72+
<Button svgIcon={groupIcon} togglable={true} selected={isGridView}
73+
onClick={() => handleViewChange('grid')} />
74+
<Button svgIcon={listUnorderedSquareIcon} togglable={true} selected={!isGridView}
75+
onClick={() => handleViewChange('list')} />
76+
</ButtonGroup>
77+
</div>
78+
79+
<StackLayout className={`grid ${isGridView ? 'grid-cols-2' : 'grid-cols-1'} ${isGridView ? 'lg:grid-cols-4' : 'lg:grid-cols-1'}`} orientation="horizontal" style={{ gap: "var(--kendo-spacing-4) var(--kendo-spacing-6)" }}>
80+
{team.teamMembers.map((member, index) => {
81+
return <Card key={index}>
82+
<CardBody className="flex items-center">
83+
<Avatar className="bg-[#008B8B]">{getInitials(member.teamMember)}</Avatar>
84+
<div className="overflow-hidden">
85+
<CardTitle className="font-medium truncate">{member.teamMember}</CardTitle>
86+
<CardSubtitle className="text-subtle m-0 truncate">{member.title}</CardSubtitle>
87+
</div>
88+
<Button svgIcon={pencilIcon} fillMode="flat" className="ml-auto" />
89+
</CardBody>
90+
<CardFooter className="border-0 p-2">
91+
<Button svgIcon={detailSectionIcon} fillMode="flat">Details</Button>
92+
</CardFooter>
93+
</Card>
94+
})}
95+
</StackLayout>
96+
97+
<div className="flex justify-end mt-auto">
98+
<FloatingActionButton svgIcon={plusIcon} text="Add new member" size="small" alignOffset={{ x: 40, y: 75 }}/>
99+
</div>
100+
</div>
101+
<div className="bg-surface-alt color-subtle p-2 text-center">
102+
<span>Copyright &#169; 2025 Progress Software. All rights reserved.</span>
103+
</div>
104+
</>
105+
)
106+
}

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

Lines changed: 3 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Layout } from "@progress/kendo-drawing";
21
import { ButtonGroup, Button, ChipList, Chip, ChipProps, ChipListChangeEvent } from "@progress/kendo-react-buttons";
32
import { SvgIcon } from "@progress/kendo-react-common";
43
import { Breadcrumb, Card, CardBody, Avatar, CardTitle, CardSubtitle, CardFooter, BreadcrumbLinkMouseEvent, StackLayout } from "@progress/kendo-react-layout";
54
import { checkIcon, chevronRightIcon, groupIcon, homeIcon, listUnorderedSquareIcon } from "@progress/kendo-svg-icons";
65
import React from "react";
76
import { useNavigate } from "react-router-dom";
7+
import { teamsChips, teamsData } from "./data";
88

99
interface DataModel {
1010
id: string;
@@ -23,144 +23,6 @@ const breadcrumbItems: DataModel[] = [
2323
}
2424
];
2525

26-
const teamsChips = [
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-
34-
const teamsData = [
35-
{
36-
teamCode: 'FE',
37-
teamName: 'Frontend team',
38-
teamMembers: '10 members',
39-
avatarColor: '#9C38FF',
40-
group: 'technology'
41-
},
42-
{
43-
teamCode: 'BE',
44-
teamName: 'Backend Team',
45-
teamMembers: '10 members',
46-
avatarColor: '#800000',
47-
group: 'technology'
48-
},
49-
{
50-
teamCode: 'DO',
51-
teamName: 'DevOps Team',
52-
teamMembers: '10 members',
53-
avatarColor: '#333333',
54-
group: 'technology'
55-
},
56-
{
57-
teamCode: 'QA',
58-
teamName: 'QA Team',
59-
teamMembers: '10 members',
60-
avatarColor: '#218247',
61-
group: 'technology'
62-
},
63-
{
64-
teamCode: 'UX',
65-
teamName: 'UX/UI Design Team',
66-
teamMembers: '10 members',
67-
avatarColor: '#DB0000',
68-
group: 'product'
69-
},
70-
{
71-
teamCode: 'DB',
72-
teamName: 'Database Team',
73-
teamMembers: '10 members',
74-
avatarColor: '#8F7200',
75-
group: 'technology'
76-
},
77-
{
78-
teamCode: 'М',
79-
teamName: 'Marketing Team',
80-
teamMembers: '10 members',
81-
avatarColor: '#008B8B',
82-
group: 'marketing'
83-
},
84-
{
85-
teamCode: 'PM',
86-
teamName: 'Product Management Team',
87-
teamMembers: '10 members',
88-
avatarColor: '#C14E34',
89-
group: 'product'
90-
},
91-
{
92-
teamCode: 'TS',
93-
teamName: 'Technical Support Team',
94-
teamMembers: '10 members',
95-
avatarColor: '#027EB5',
96-
group: 'technology'
97-
},
98-
{
99-
teamCode: 'S',
100-
teamName: 'Security Team',
101-
teamMembers: '10 members',
102-
avatarColor: '#267B92',
103-
group: 'technology'
104-
},
105-
{
106-
teamCode: 'DS',
107-
teamName: 'Data Science Team',
108-
teamMembers: '10 members',
109-
avatarColor: '#708090',
110-
group: 'technology'
111-
},
112-
{
113-
teamCode: 'IE',
114-
teamName: 'Infrastructure Engineering',
115-
teamMembers: '10 members',
116-
avatarColor: '#191970',
117-
group: 'technology'
118-
},
119-
{
120-
teamCode: 'RD',
121-
teamName: 'Research and Development',
122-
teamMembers: '10 members',
123-
avatarColor: '#7B3F00',
124-
group: 'technology'
125-
},
126-
{
127-
teamCode: 'BA',
128-
teamName: 'Business Analysis Team',
129-
teamMembers: '10 members',
130-
avatarColor: '#607F1F',
131-
group: 'business'
132-
},
133-
{
134-
teamCode: 'TW',
135-
teamName: 'Technical Writing Team',
136-
teamMembers: '10 members',
137-
avatarColor: '#DC147F',
138-
group: 'business'
139-
},
140-
{
141-
teamCode: 'S',
142-
teamName: 'Sales Team',
143-
teamMembers: '10 members',
144-
avatarColor: '#5769D2',
145-
group: 'marketing'
146-
},
147-
{
148-
teamCode: 'SA',
149-
teamName: 'System Administration',
150-
teamMembers: '10 members',
151-
avatarColor: '#4682B4',
152-
group: 'technology'
153-
},
154-
{
155-
teamCode: 'CG',
156-
teamName: 'Compliance and Governance',
157-
teamMembers: '10 members',
158-
avatarColor: '#4B0082',
159-
group: 'business'
160-
}
161-
];
162-
163-
16426
export default function TeamManagement() {
16527
const navigate = useNavigate();
16628
const [chipValue, setChipValue] = React.useState<string[]>(['all']);
@@ -185,7 +47,6 @@ export default function TeamManagement() {
18547
setIsGridView(false);
18648
}
18749
};
188-
console.log(chipValue)
18950

19051
return (
19152
<>
@@ -222,11 +83,11 @@ export default function TeamManagement() {
22283
<Avatar style={{ background: team.avatarColor }}>{team.teamCode}</Avatar>
22384
<div className="overflow-hidden">
22485
<CardTitle className="font-medium truncate">{team.teamName}</CardTitle>
225-
<CardSubtitle className="text-subtle m-0 truncate">{team.teamMembers}</CardSubtitle>
86+
<CardSubtitle className="text-subtle m-0 truncate">{team.teamMembers.length} team members</CardSubtitle>
22687
</div>
22788
</CardBody>
22889
<CardFooter className="border-0 p-2">
229-
<Button svgIcon={chevronRightIcon} fillMode="flat">Explore team</Button>
90+
<Button svgIcon={chevronRightIcon} fillMode="flat" onClick={() => navigate(`/team-management/${team.teamCode}`)}>Explore team</Button>
23091
</CardFooter>
23192
</Card>
23293
})}

0 commit comments

Comments
 (0)