telerik · silviyaboteva · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -109,7 +109,7 @@ updates:
       - "Dependencies"
 
   - package-ecosystem: "npm"
-    directory: "/examples/kendo-react-freemium"
+    directory: "/examples/kendo-react-project-tracker-app"
     schedule:
       interval: "daily"
     groups:

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -41,8 +41,8 @@ jobs:
               - 'examples/kendo-react-file-manager/**'
             kendo-react-finance-portfolio:
               - 'examples/kendo-react-finance-portfolio/**'
-            kendo-react-freemium:
-              - 'examples/kendo-react-freemium/**'
+            kendo-react-project-tracker-app:
+              - 'examples/kendo-react-project-tracker-app/**'
             kendo-react-homepage-demo:
               - 'examples/kendo-react-homepage-demo/**'
             kendo-react-nextjs:
@@ -115,9 +115,9 @@ jobs:
           npm ci
           npm run build
 
-      - name: Build Kendo React Freemium app
-        working-directory: ./examples/kendo-react-freemium
-        if: steps.changes.outputs.kendo-react-freemium == 'true'
+      - name: Build Kendo React Project Tracker app
+        working-directory: ./examples/kendo-react-project-tracker-app
+        if: steps.changes.outputs.kendo-react-project-tracker-app == 'true'
         run: |
           npm ci
           npm run build

diff --git a/examples/kendo-react-freemium/.gitignore → ...endo-react-project-tracker-app/.gitignore b/examples/kendo-react-freemium/.gitignore → ...endo-react-project-tracker-app/.gitignore
diff --git a/examples/kendo-react-freemium/README.md → ...kendo-react-project-tracker-app/README.md b/examples/kendo-react-freemium/README.md → ...kendo-react-project-tracker-app/README.md
diff --git a/examples/kendo-react-freemium/custom.d.ts → ...ndo-react-project-tracker-app/custom.d.ts b/examples/kendo-react-freemium/custom.d.ts → ...ndo-react-project-tracker-app/custom.d.ts
diff --git a/examples/kendo-react-freemium/index.html → ...endo-react-project-tracker-app/index.html b/examples/kendo-react-freemium/index.html → ...endo-react-project-tracker-app/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + KendoReact</title>
+    <title>Project Tracker Sample Application | Progress Telerik</title>
   </head>
   <body class="k-body">
     <div id="root"></div>

diff --git a/...es/kendo-react-freemium/package-lock.json → ...act-project-tracker-app/package-lock.json b/...es/kendo-react-freemium/package-lock.json → ...act-project-tracker-app/package-lock.json
diff --git a/examples/kendo-react-freemium/package.json → ...do-react-project-tracker-app/package.json b/examples/kendo-react-freemium/package.json → ...do-react-project-tracker-app/package.json
@@ -1,8 +1,8 @@
 {
-    "name": "kendo-react-freemium",
+    "name": "kendo-react-project-tracker-app",
     "private": true,
     "version": "0.0.0",
-    "homepage": "https://telerik.github.io/kendo-react/kendo-react-freemium/",
+    "homepage": "https://telerik.github.io/kendo-react/kendo-react-project-tracker-app/",
     "type": "module",
     "scripts": {
         "dev": "vite",

diff --git a/examples/kendo-react-project-tracker-app/public/favicon.ico b/examples/kendo-react-project-tracker-app/public/favicon.ico
diff --git a/...ples/kendo-react-freemium/public/vite.svg → ...react-project-tracker-app/public/vite.svg b/...ples/kendo-react-freemium/public/vite.svg → ...react-project-tracker-app/public/vite.svg
diff --git a/examples/kendo-react-freemium/src/App.tsx → ...ndo-react-project-tracker-app/src/App.tsx b/examples/kendo-react-freemium/src/App.tsx → ...ndo-react-project-tracker-app/src/App.tsx
@@ -13,7 +13,7 @@ import NewTask from "./pages/NewTask";
 export default function App() {
   return (
     <>
-      <BrowserRouter basename="/kendo-react/kendo-react-freemium">
+      <BrowserRouter basename="/kendo-react/kendo-react-project-tracker-app">
         <AppBarComponent />
         <DrawerComponent>
             <Routes>

diff --git a/...do-react-freemium/src/assets/Avatar-1.png → ...oject-tracker-app/src/assets/Avatar-1.png b/...do-react-freemium/src/assets/Avatar-1.png → ...oject-tracker-app/src/assets/Avatar-1.png
diff --git a/...do-react-freemium/src/assets/Avatar-2.png → ...oject-tracker-app/src/assets/Avatar-2.png b/...do-react-freemium/src/assets/Avatar-2.png → ...oject-tracker-app/src/assets/Avatar-2.png
diff --git a/...do-react-freemium/src/assets/Avatar-3.png → ...oject-tracker-app/src/assets/Avatar-3.png b/...do-react-freemium/src/assets/Avatar-3.png → ...oject-tracker-app/src/assets/Avatar-3.png
diff --git a/...do-react-freemium/src/assets/Avatar-4.png → ...oject-tracker-app/src/assets/Avatar-4.png b/...do-react-freemium/src/assets/Avatar-4.png → ...oject-tracker-app/src/assets/Avatar-4.png
diff --git a/...do-react-freemium/src/assets/Avatar-5.png → ...oject-tracker-app/src/assets/Avatar-5.png b/...do-react-freemium/src/assets/Avatar-5.png → ...oject-tracker-app/src/assets/Avatar-5.png
diff --git a/...do-react-freemium/src/assets/Avatar-6.png → ...oject-tracker-app/src/assets/Avatar-6.png b/...do-react-freemium/src/assets/Avatar-6.png → ...oject-tracker-app/src/assets/Avatar-6.png
diff --git a/...do-react-freemium/src/assets/Avatar-7.png → ...oject-tracker-app/src/assets/Avatar-7.png b/...do-react-freemium/src/assets/Avatar-7.png → ...oject-tracker-app/src/assets/Avatar-7.png
diff --git a/...do-react-freemium/src/assets/Avatar-8.png → ...oject-tracker-app/src/assets/Avatar-8.png b/...do-react-freemium/src/assets/Avatar-8.png → ...oject-tracker-app/src/assets/Avatar-8.png
diff --git a/...do-react-freemium/src/assets/Avatar-9.png → ...oject-tracker-app/src/assets/Avatar-9.png b/...do-react-freemium/src/assets/Avatar-9.png → ...oject-tracker-app/src/assets/Avatar-9.png
diff --git a/...endo-react-freemium/src/assets/Avatar.png → ...project-tracker-app/src/assets/Avatar.png b/...endo-react-freemium/src/assets/Avatar.png → ...project-tracker-app/src/assets/Avatar.png
diff --git a/...eact-freemium/src/assets/compact-logo.svg → ...t-tracker-app/src/assets/compact-logo.svg b/...eact-freemium/src/assets/compact-logo.svg → ...t-tracker-app/src/assets/compact-logo.svg
diff --git a/...endo-react-freemium/src/assets/logo-1.svg → ...project-tracker-app/src/assets/logo-1.svg b/...endo-react-freemium/src/assets/logo-1.svg → ...project-tracker-app/src/assets/logo-1.svg
diff --git a/...eemium/src/components/AppBarComponent.tsx → ...er-app/src/components/AppBarComponent.tsx b/...eemium/src/components/AppBarComponent.tsx → ...er-app/src/components/AppBarComponent.tsx
@@ -22,7 +22,7 @@ export default function AppBarComponent() {
     return (
         <AppBar positionMode="sticky" className="bg-surface-alt !p-4" themeColor='inherit'>
             <AppBarSection className="grow gap-4">
-                <a href={"/kendo-react/kendo-react-freemium/"}>
+                <a href="#" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
                     <img src={logo} alt="Logo" className="hidden md:flex" />
                     <img src={compactLogo} alt="Logo" className="flex md:hidden" />
                 </a>

diff --git a/...eemium/src/components/DrawerComponent.tsx → ...er-app/src/components/DrawerComponent.tsx b/...eemium/src/components/DrawerComponent.tsx → ...er-app/src/components/DrawerComponent.tsx
diff --git a/examples/kendo-react-freemium/src/index.css → ...o-react-project-tracker-app/src/index.css b/examples/kendo-react-freemium/src/index.css → ...o-react-project-tracker-app/src/index.css
diff --git a/examples/kendo-react-freemium/src/main.tsx → ...do-react-project-tracker-app/src/main.tsx b/examples/kendo-react-freemium/src/main.tsx → ...do-react-project-tracker-app/src/main.tsx
diff --git a/...s/kendo-react-freemium/src/pages/Home.tsx → ...ct-project-tracker-app/src/pages/Home.tsx b/...s/kendo-react-freemium/src/pages/Home.tsx → ...ct-project-tracker-app/src/pages/Home.tsx
@@ -24,7 +24,7 @@ export default function Home() {
 
   return (
     <>
-      <div style={{ minHeight: 'calc(100vh - 106px)'}} className="bg-linear-[119deg,_#F8F9FF_-1.78%,_#F3F2FF_47.75%,_#E6F5FF_97.28%] p-10">
+      <div style={{ minHeight: 'calc(100vh - 106px)'}} className="bg-linear-[119deg,_#F8F9FF_-1.78%,_#F3F2FF_47.75%,_#E6F5FF_97.28%] overflow-auto p-10">
         <h1 className="text-4xl text-subtle pb-6">Welcome John Porter 👋</h1>
         <div className="grid grid-cols-[360px_1fr] lg:grid-cols-12 xl:grid-cols-[1fr_2fr_360px] gap-6">
             <div className="col-span-2 lg:col-span-6 xl:col-span-2">
@@ -71,7 +71,7 @@ export default function Home() {
                     </CardHeader>
                     <CardBody className="flex flex-col gap-2">
                         {teamsData.slice(0, 4).map((team, index) => {
-                            return <Card key={'team-' + index}>
+                            return <Card key={'team-' + index} className={`${index === 2 || index === 3 ? 'hidden lg:flex' : ''}`}>
                                     <div onClick={() => navigate('/team-management')} className="cursor-pointer">
                                         <CardBody className="flex items-center">
                                             <Avatar style={{ background: team.avatarColor }}>{team.teamCode}</Avatar>
@@ -91,7 +91,7 @@ export default function Home() {
             </div>
             <div className="col-span-2 lg:col-span-4 xl:col-span-1 h-116">
                 <Card className="rounded-2xl h-full">
-                    <CardHeader className="border-0 flex justify-between items-center">
+                    <CardHeader className="border-0 flex flex-wrap justify-between items-center gap-2">
                         <CardTitle className="font-medium">To-Do List</CardTitle>
                         <Button fillMode="flat" themeColor="primary" svgIcon={plusIcon}>Add more tasks</Button>
                     </CardHeader>

diff --git a/...endo-react-freemium/src/pages/NewTask.tsx → ...project-tracker-app/src/pages/NewTask.tsx b/...endo-react-freemium/src/pages/NewTask.tsx → ...project-tracker-app/src/pages/NewTask.tsx
diff --git a/...ndo-react-freemium/src/pages/Projects.tsx → ...roject-tracker-app/src/pages/Projects.tsx b/...ndo-react-freemium/src/pages/Projects.tsx → ...roject-tracker-app/src/pages/Projects.tsx
@@ -5,13 +5,11 @@ import {
   GridLayout,
 } from "@progress/kendo-react-layout";
 import {
-  homeIcon,
-  searchIcon,
+  homeIcon
 } from "@progress/kendo-svg-icons";
 import { SvgIcon } from "@progress/kendo-react-common";
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { InputPrefix, InputSeparator, TextBox, TextBoxChangeEvent } from "@progress/kendo-react-inputs";
 import { Badge } from "@progress/kendo-react-indicators";
 import { projectsData } from "./data";
 
@@ -28,23 +26,13 @@ const breadcrumbItems: DataModel[] = [
 
 export default function Projects() {
   const navigate = useNavigate();
-  const [projects, setProjects] = React.useState(projectsData);
 
   const handleItemSelect = (e: BreadcrumbLinkMouseEvent) => {
     if (e.id === "home") {
       navigate("/");
     }
   };
 
-  const handleSearchChange = (props: TextBoxChangeEvent) => {
-    const searchValue = (props.value as string).toLowerCase();
-
-    const filteredProjects = projectsData.filter((project) => {
-      return project.ProjectName.toLowerCase().includes(searchValue);
-    });
-    setProjects(filteredProjects);
-  };
-
   return (
     <div
       style={{ minHeight: "calc(100vh - 106px)" }}
@@ -58,16 +46,10 @@ export default function Projects() {
 
       <div className="flex flex-wrap items-center justify-between">
         <h1 className="text-4xl">Projects</h1>
-        <TextBox className="w-75" size="large" onChange={handleSearchChange} prefix={() =>
-          <InputPrefix>
-            <SvgIcon icon={searchIcon} />
-            <InputSeparator />
-          </InputPrefix>
-        } placeholder="Search projects" />
       </div>
 
-      <GridLayout className="grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" style={{ gap: "var(--kendo-spacing-4) var(--kendo-spacing-6)" }}>
-        {projects.map((project, index) => {
+      <GridLayout className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" style={{ gap: "var(--kendo-spacing-4) var(--kendo-spacing-6)" }}>
+        {projectsData.map((project, index) => {
           return (
             <div key={index} className="bg-surface-alt border-1 border-border rounded-lg">
               <div className="px-4 py-3">
@@ -96,7 +78,7 @@ export default function Projects() {
                     <Avatar type={'image'} size="small" className="mr-1" border={false}>
                       <img src={project.AvatarSrc} />
                     </Avatar>
-                    <span>Marlon66</span>
+                    <span className="truncate">Marlon66</span>
                   </div>
                 </div>
                 <div>
@@ -105,7 +87,7 @@ export default function Projects() {
                     <Avatar type={'image'} size="small" className="mr-1">
                       <img src={project.AvatarSrc} />
                     </Avatar>
-                    <span>Monserrat49</span>
+                    <span className="truncate">Monserrat49</span>
                   </div>
                 </div>
               </div>

diff --git a/...ndo-react-freemium/src/pages/Settings.tsx → ...roject-tracker-app/src/pages/Settings.tsx b/...ndo-react-freemium/src/pages/Settings.tsx → ...roject-tracker-app/src/pages/Settings.tsx
diff --git a/...s/kendo-react-freemium/src/pages/Task.tsx → ...ct-project-tracker-app/src/pages/Task.tsx b/...s/kendo-react-freemium/src/pages/Task.tsx → ...ct-project-tracker-app/src/pages/Task.tsx
diff --git a/.../kendo-react-freemium/src/pages/Tasks.tsx → ...t-project-tracker-app/src/pages/Tasks.tsx b/.../kendo-react-freemium/src/pages/Tasks.tsx → ...t-project-tracker-app/src/pages/Tasks.tsx
diff --git a/...s/kendo-react-freemium/src/pages/Team.tsx → ...ct-project-tracker-app/src/pages/Team.tsx b/...s/kendo-react-freemium/src/pages/Team.tsx → ...ct-project-tracker-app/src/pages/Team.tsx
@@ -107,7 +107,7 @@ export default function Team() {
                    </ButtonGroup>
                </div>
 
-              <GridLayout className={`${isGridView ? 'grid-cols-2' : 'grid-cols-1'} ${isGridView ? 'lg:grid-cols-4' : 'lg:grid-cols-1'}`} style={{ gap: "var(--kendo-spacing-4) var(--kendo-spacing-6)" }}>
+              <GridLayout className={`${isGridView ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4' : 'grid-cols-1'}`} style={{ gap: "var(--kendo-spacing-4) var(--kendo-spacing-6)" }}>
                 {team.teamMembers.map((member, index) => {
                     return <Card key={index}>
                     <CardBody className="flex items-center">

diff --git a/...act-freemium/src/pages/TeamManagement.tsx → ...-tracker-app/src/pages/TeamManagement.tsx b/...act-freemium/src/pages/TeamManagement.tsx → ...-tracker-app/src/pages/TeamManagement.tsx
@@ -81,7 +81,7 @@ export default function TeamManagement() {
                   )} />
             </div>
 
-            <GridLayout className={`${isGridView ? 'grid-cols-2' : 'grid-cols-1'} ${isGridView ? 'lg:grid-cols-4' : 'lg:grid-cols-1'}`} style={{gap: "var(--kendo-spacing-4) var(--kendo-spacing-6)"}}>
+            <GridLayout className={`${isGridView ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4' : 'grid-cols-1'}`} style={{gap: "var(--kendo-spacing-4) var(--kendo-spacing-6)"}}>
                 {teams.map((team, index) => {
                   return <Card key={index}>
                     <CardBody className="flex items-center">

diff --git a/...es/kendo-react-freemium/src/pages/data.ts → ...act-project-tracker-app/src/pages/data.ts b/...es/kendo-react-freemium/src/pages/data.ts → ...act-project-tracker-app/src/pages/data.ts
diff --git a/...es/kendo-react-freemium/tsconfig.app.json → ...act-project-tracker-app/tsconfig.app.json b/...es/kendo-react-freemium/tsconfig.app.json → ...act-project-tracker-app/tsconfig.app.json
diff --git a/...o-react-freemium/tsconfig.app.tsbuildinfo → ...ject-tracker-app/tsconfig.app.tsbuildinfo b/...o-react-freemium/tsconfig.app.tsbuildinfo → ...ject-tracker-app/tsconfig.app.tsbuildinfo
diff --git a/examples/kendo-react-freemium/tsconfig.json → ...o-react-project-tracker-app/tsconfig.json b/examples/kendo-react-freemium/tsconfig.json → ...o-react-project-tracker-app/tsconfig.json
diff --git a/...s/kendo-react-freemium/tsconfig.node.json → ...ct-project-tracker-app/tsconfig.node.json b/...s/kendo-react-freemium/tsconfig.node.json → ...ct-project-tracker-app/tsconfig.node.json
diff --git a/...-react-freemium/tsconfig.node.tsbuildinfo → ...ect-tracker-app/tsconfig.node.tsbuildinfo b/...-react-freemium/tsconfig.node.tsbuildinfo → ...ect-tracker-app/tsconfig.node.tsbuildinfo
diff --git a/examples/kendo-react-freemium/vite.config.ts → ...-react-project-tracker-app/vite.config.ts b/examples/kendo-react-freemium/vite.config.ts → ...-react-project-tracker-app/vite.config.ts
@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
-  base: `/kendo-react/kendo-react-freemium/`,
+  base: `/kendo-react/kendo-react-project-tracker-app/`,
   plugins: [react(), tailwindcss()],
 });
diff --git a/live/bin/build-gh-pages b/live/bin/build-gh-pages
@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 # Builds example projects and deploys them to GH Pages
-STANDALONE_PROJECTS=(ecommerce-jewellery-store kendo-react-e-commerce-astro-app kendo-react-finance-portfolio react-coffee-warehouse react-admin-dashboard kendo-react-homepage-demo kendo-react-file-manager react-grid-live-data kendo-react-freemium)
+STANDALONE_PROJECTS=(ecommerce-jewellery-store kendo-react-e-commerce-astro-app kendo-react-finance-portfolio react-coffee-warehouse react-admin-dashboard kendo-react-homepage-demo kendo-react-file-manager react-grid-live-data kendo-react-project-tracker-app)
 
 set -e
 
@@ -16,7 +16,7 @@ do
   npm run build
   mkdir -p ../../live/build/${PROJECT}
 
-if [ "$PROJECT" = "kendo-react-e-commerce-astro-app" ] || [ "$PROJECT" = "kendo-react-freemium" ]; then
+if [ "$PROJECT" = "kendo-react-e-commerce-astro-app" ] || [ "$PROJECT" = "kendo-react-project-tracker-app" ]; then
   mv -v dist/* "../../live/build/${PROJECT}"
 else
   mv -v build/* "../../live/build/${PROJECT}"

diff --git a/live/static/index.html b/live/static/index.html
@@ -19,7 +19,7 @@ <h1>KendoReact - Sample Applications</h1>
       <li><a href="react-grid-live-data/">Grid Live Data Application</a></li>
       <li><a href="ecommerce-jewellery-store/">Ecommerce jewellery Store Application</a></li>
       <li><a href="kendo-react-e-commerce-astro-app/">Ecommerce Astro Application</a></li>
-      <li><a href="kendo-react-freemium/">Kendo React Freemium Application</a></li>
+      <li><a href="kendo-react-project-tracker-app/">Kendo React Project Tracker Application</a></li>
     </ul>
     <p>
       To access the source code of all sample applications, go to the