Atul/PatientProTokenRepository
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated search box style in entries table to match navbar and Same loading animation on all pages

Browse Source
This commit is contained in:
Mahima Sonwane 2025-05-13 16:43:31 +05:30
parent e7d9b6966b
commit 71a0ebef34
1 changed files with 136 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/components/TokenTable.jsx
View File

@ -96,49 +96,46 @@ export default function TokenTable({ statusFilter }) {
// Handle theme loading state // Handle theme loading state
if (darkMode === undefined) { if (darkMode === undefined) {
return ( return (
<div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}> <div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
<div className="text-center"> <div className="text-center">
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${ <div
darkMode === true ? 'border-gray-100' : 'border-gray-900' className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${darkMode === true ? "border-gray-100" : "border-blue-500"
}`}></div> }`}
<p className={`mt-4 text-lg font-semibold ${ ></div>
darkMode === true ? 'text-gray-100' : 'text-gray-900' <p className={`mt-4 text-lg font-semibold ${darkMode === true ? 'text-gray-100' : 'text-gray-900'
}`}> }`}>
Loading... Loading...
</p> </p>
</div> </div>
</div> </div>
); );
} }
if (loading) return ( if (loading) return (
<div className={`text-center py-10 ${darkMode ? 'bg-gray-900' : 'bg-white'}`}> <div className={`text-center py-10 ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 mx-auto ${ <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 mx-auto ${darkMode ? 'border-gray-100' : 'border-blue-400'
darkMode ? 'border-gray-100' : 'border-gray-900'
}`}></div> }`}></div>
<p className={`mt-4 text-lg font-semibold ${ <p className={`mt-4 text-lg font-semibold ${darkMode ? 'text-gray-100' : 'text-gray-900'
darkMode ? 'text-gray-100' : 'text-gray-900'
}`}> }`}>
Loading... Loading...
</p> </p>
</div> </div>
); );
if (error) return ( if (error) return (
<div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}> <div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}>
Error: {error} Error: {error}
</div> </div>
); );
return ( return (
<div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}> <div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
<input <input
type="text" type="text"
placeholder="Search by token or name" placeholder="Search by token or name"
className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${ className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${darkMode
darkMode
? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500' ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
: 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500' : 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500'
}`} }`}
@ -172,8 +169,7 @@ return (
<td className="p-3">{entry.patientName}</td> <td className="p-3">{entry.patientName}</td>
<td className="p-3"> <td className="p-3">
<span <span
className={`px-2 py-1 rounded-full text-xs font-semibold ${ className={`px-2 py-1 rounded-full text-xs font-semibold ${entry.status === "done"
entry.status === "done"
? darkMode ? darkMode
? "bg-green-900 text-green-100" ? "bg-green-900 text-green-100"
: "bg-green-100 text-green-800" : "bg-green-100 text-green-800"
@ -194,8 +190,7 @@ return (
<> <>
<button <button
onClick={() => updateStatus(entry.$id, "done")} onClick={() => updateStatus(entry.$id, "done")}
className={`border rounded-full px-2 py-1 text-xs transition-colors ${ className={`border rounded-full px-2 py-1 text-xs transition-colors ${darkMode
darkMode
? 'border-green-400 text-green-400 hover:bg-green-900' ? 'border-green-400 text-green-400 hover:bg-green-900'
: 'border-green-600 text-green-600 hover:bg-green-50' : 'border-green-600 text-green-600 hover:bg-green-50'
}`} }`}
@ -204,8 +199,7 @@ return (
</button> </button>
<button <button
onClick={() => updateStatus(entry.$id, "missed")} onClick={() => updateStatus(entry.$id, "missed")}
className={`border rounded-full px-2 py-1 text-xs transition-colors ${ className={`border rounded-full px-2 py-1 text-xs transition-colors ${darkMode
darkMode
? 'border-red-400 text-red-400 hover:bg-red-900' ? 'border-red-400 text-red-400 hover:bg-red-900'
: 'border-red-600 text-red-600 hover:bg-red-50' : 'border-red-600 text-red-600 hover:bg-red-50'
}`} }`}
@ -221,14 +215,12 @@ return (
</table> </table>
</div> </div>
<div className={`flex justify-between items-center mt-4 p-2 rounded ${ <div className={`flex justify-between items-center mt-4 p-2 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-100'
darkMode ? 'bg-gray-800' : 'bg-gray-100'
}`}> }`}>
<button <button
disabled={currentPage === 1} disabled={currentPage === 1}
onClick={() => setCurrentPage((prev) => prev - 1)} onClick={() => setCurrentPage((prev) => prev - 1)}
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${ className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${darkMode
darkMode
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent' : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
}`} }`}
@ -241,8 +233,7 @@ return (
<button <button
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
onClick={() => setCurrentPage((prev) => prev + 1)} onClick={() => setCurrentPage((prev) => prev + 1)}
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${ className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${darkMode
darkMode
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent' : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
}`} }`}
@ -253,5 +244,5 @@ return (
</> </>
)} )}
</div> </div>
); );
} }