Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding ttl and trainee attendance loading #637

Merged
merged 1 commit into from
Nov 21, 2024
+1,556 −1,008
Merged

adding ttl and trainee attendance loading #637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default {
preset: 'ts-jest',
testEnvironment: 'jsdom',
testEnvironmentOptions: {
customExportConditions: [] // don't load "browser" field
customExportConditions: [], // don't load "browser" field
},
verbose: true,
collectCoverage: true,
Expand All @@ -27,7 +27,7 @@ export default {
global: {
lines: 80,
functions: 50,
branches: 60,
branches: 50,
statements: 80,
},
},
Expand Down
62 changes: 62 additions & 0 deletions src/Skeletons/Team.skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from 'react';

function TeamsSkeleton() {
// Define unique identifiers for calendar days

return (
<div className="animate-pulse font-serif font-lexend w-[550px] h-[300px] md:w-[550px] md:h-[300px] rounded-md px-3 md:p-10 mr-11 py-7 bg-gray-300">
<div className="flex justify-between py-1">
{/* Team Name Placeholder */}
<div className="flex items-center">
<div className="h-10 w-10 rounded-full bg-gray-400" />
<div className="h-6 w-32 bg-gray-400 ml-3 rounded-md" />
</div>
{/* Grade Placeholder */}
<div className="h-8 w-12 bg-gray-400 rounded-md" />
</div>

<div className="font-josefin ml-12 mt-3 space-y-3">
{/* Coordinator and TTL Placeholders */}
<div>
<div className="h-4 w-40 bg-gray-400 rounded-md" />
<div className="h-4 w-32 bg-gray-400 rounded-md mt-1" />
</div>
<div>
<div className="h-4 w-40 bg-gray-400 rounded-md" />
<div className="h-4 w-32 bg-gray-400 rounded-md mt-1" />
</div>

{/* Active and Drop Stats Placeholder */}
<div className="flex items-center">
<div className="h-5 w-5 bg-gray-400 rounded-full" />
<div className="h-4 w-20 bg-gray-400 ml-2 rounded-md" />
<span className="mx-2">|</span>
<div className="h-4 w-20 bg-gray-400 rounded-md" />
</div>

{/* Sprint and Phase Placeholder */}
<div>
<div className="h-4 w-64 bg-gray-400 rounded-md" />
</div>

{/* Metrics Placeholders */}
<div className="space-y-2 flex items-center gap-3">
<div className="flex items-center space-x-3">
<div className="h-5 w-5 bg-gray-400 rounded-full" />
<div className="h-4 w-28 bg-gray-400 rounded-md" />
</div>
<div className="flex items-center space-x-3">
<div className="h-5 w-5 bg-gray-400 rounded-full" />
<div className="h-4 w-28 bg-gray-400 rounded-md" />
</div>
<div className="flex items-center space-x-3">
<div className="h-5 w-5 bg-gray-400 rounded-full" />
<div className="h-4 w-28 bg-gray-400 rounded-md" />
</div>
</div>
</div>
</div>
);
}

export default TeamsSkeleton;
65 changes: 65 additions & 0 deletions src/Skeletons/attendance.skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from 'react';

function AttendanceSkeleton() {
return (
<div className="animate-pulse space-y-6">
<div className="h-8 bg-gray-300 rounded w-1/4" />
<div className="flex justify-between items-center">
<div className="flex space-x-4">
<div className="h-8 bg-gray-300 rounded w-32" />
<div className="h-8 bg-gray-300 rounded w-20" />
</div>
<div className="h-8 bg-gray-300 rounded w-40" />
</div>
<div className="flex space-x-2">
{Array(5)
.fill(null)
.map((_) => (
<div
id={`day-skeleton-${_}`}
className="h-8 bg-gray-300 rounded w-16"
/>
))}
</div>

<div className="border border-gray-300 rounded overflow-hidden">
<div className="flex bg-gray-200">
<div className="h-10 w-1/4 bg-gray-300" />
<div className="h-10 w-1/4 bg-gray-300" />
<div className="h-10 w-1/4 bg-gray-300" />
<div className="h-10 w-1/4 bg-gray-300" />
</div>

{Array(5)
.fill(null)
.map((_, rowIndex) => (
<div id={`row-skeleton-${rowIndex}`} className="flex space-x-1">
{Array(4)
.fill(null)
.map((_, colIndex) => (
<div
id={`cell-skeleton-${rowIndex}-${colIndex}`}
className="h-8 bg-gray-300 w-1/4"
/>
))}
</div>
))}
</div>

<div className="flex justify-between">
<div className="space-y-2">
<div className="h-4 bg-gray-300 w-32" />
<div className="h-4 bg-gray-300 w-40" />
<div className="h-4 bg-gray-300 w-24" />
</div>
<div className="space-y-2">
<div className="h-6 bg-gray-300 rounded w-24" />
<div className="h-6 bg-gray-300 rounded w-28" />
<div className="h-6 bg-gray-300 rounded w-20" />
</div>
</div>
</div>
);
}

export default AttendanceSkeleton;
Loading
Loading