kontenhumas
/
kontenhumas-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: dark mode

This commit is contained in:
Sabda Yagra 2026-02-04 15:43:19 +07:00
parent 82062bc3ad
commit 27fbb39396
22 changed files with 94 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/(admin)/admin/categories/components/table-categories.tsx
View File

@ -187,7 +187,7 @@ const TableCategories = () => {
return ( return (
<> <>
<div className="w-full overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="w-full overflow-x-auto bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<div className="flex justify-between items-center px-4 py-2"> <div className="flex justify-between items-center px-4 py-2">
<h2 className="text-lg font-semibold">Daftar Kategori</h2> <h2 className="text-lg font-semibold">Daftar Kategori</h2>

8
app/[locale]/(admin)/admin/categories/page.tsx
View File

@ -127,12 +127,12 @@ const ReactTableImagePage = () => {
}; };
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-default-50">
{/* <SiteBreadcrumb /> */} {/* <SiteBreadcrumb /> */}
<div className="p-6"> <div className="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0"> <Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg"> <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle> <CardTitle>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -140,7 +140,7 @@ const ReactTableImagePage = () => {
<UploadIcon className="w-4 h-4 text-blue-600" /> <UploadIcon className="w-4 h-4 text-blue-600" />
</div> </div>
<div> <div>
<h1 className="text-xl font-semibold text-gray-900"> <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Categories Management Categories Management
</h1> </h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -294,7 +294,7 @@ const ReactTableImagePage = () => {
</div> </div>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-6 bg-gray-50"> <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<TableCategories /> <TableCategories />
</CardContent> </CardContent>
</Card> </Card>

2
app/[locale]/(admin)/admin/content/audio/components/audio-tabs.tsx
View File

@ -35,7 +35,7 @@ const AudioTabs = () => {
</div> </div>
<TabsContent value="submitted" className="mt-0"> <TabsContent value="submitted" className="mt-0">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<TableAudio /> <TableAudio />
</div> </div>
</TabsContent> </TabsContent>

2
app/[locale]/(admin)/admin/content/audio/create/page.tsx
View File

@ -3,7 +3,7 @@ import FormAudio from "@/components/form/content/audio/audio-form";
const AudioCreatePage = async () => { const AudioCreatePage = async () => {
return ( return (
<div> <div>
<div className="space-y-4 bg-slate-100"> <div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormAudio /> <FormAudio />
</div> </div>
</div> </div>

2
app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx
View File

@ -5,7 +5,7 @@ const AudioDetailPage = async () => {
return ( return (
<div> <div>
<SiteBreadcrumb /> <SiteBreadcrumb />
<div className="space-y-4 bg-slate-100"> <div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormAudioDetail /> <FormAudioDetail />
</div> </div>
</div> </div>

8
app/[locale]/(admin)/admin/content/audio/page.tsx
View File

@ -12,12 +12,12 @@ const ReactTableAudioPage = () => {
const { can } = usePermission(); const { can } = usePermission();
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-default-50">
<SiteBreadcrumb /> <SiteBreadcrumb />
<div className="p-6"> <div className="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0"> <Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg"> <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle> <CardTitle>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -25,7 +25,7 @@ const ReactTableAudioPage = () => {
<UploadIcon className="w-4 h-4 text-blue-600" /> <UploadIcon className="w-4 h-4 text-blue-600" />
</div> </div>
<div> <div>
<h1 className="text-xl font-semibold text-gray-900"> <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Audio Management Audio Management
</h1> </h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -49,7 +49,7 @@ const ReactTableAudioPage = () => {
</div> </div>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-6 bg-gray-50"> <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<AudioTabs /> <AudioTabs />
</CardContent> </CardContent>
</Card> </Card>

2
app/[locale]/(admin)/admin/content/image/components/image-tabs.tsx
View File

@ -35,7 +35,7 @@ const ImageTabs = () => {
</div> </div>
*/} */}
<TabsContent value="submitted" className="mt-0"> <TabsContent value="submitted" className="mt-0">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<TableImage /> <TableImage />
</div> </div>
</TabsContent> </TabsContent>

2
app/[locale]/(admin)/admin/content/image/detail/[id]/page.tsx
View File

@ -5,7 +5,7 @@ const ImageDetailPage = async () => {
return ( return (
<div> <div>
<SiteBreadcrumb /> <SiteBreadcrumb />
<div className="space-y-4 bg-slate-100"> <div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormImageDetail /> <FormImageDetail />
</div> </div>
</div> </div>

8
app/[locale]/(admin)/admin/content/image/page.tsx
View File

@ -12,12 +12,12 @@ const ReactTableImagePage = () => {
const { can } = usePermission(); const { can } = usePermission();
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-default-50">
<SiteBreadcrumb /> <SiteBreadcrumb />
<div className="p-6"> <div className="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0"> <Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg"> <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle> <CardTitle>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -25,7 +25,7 @@ const ReactTableImagePage = () => {
<UploadIcon className="w-4 h-4 text-blue-600" /> <UploadIcon className="w-4 h-4 text-blue-600" />
</div> </div>
<div> <div>
<h1 className="text-xl font-semibold text-gray-900"> <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Image Management Image Management
</h1> </h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -55,7 +55,7 @@ const ReactTableImagePage = () => {
</div> </div>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-6 bg-gray-50"> <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<ImageTabs /> <ImageTabs />
</CardContent> </CardContent>
</Card> </Card>

2
app/[locale]/(admin)/admin/content/text/components/document-tabs.tsx
View File

@ -35,7 +35,7 @@ const DocumentTabs = () => {
</div> </div>
<TabsContent value="submitted" className="mt-0"> <TabsContent value="submitted" className="mt-0">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<TableTeks /> <TableTeks />
</div> </div>
</TabsContent> </TabsContent>

2
app/[locale]/(admin)/admin/content/text/create/page.tsx
View File

@ -5,7 +5,7 @@ const TeksCreatePage = async () => {
return ( return (
<div> <div>
<SiteBreadcrumb /> <SiteBreadcrumb />
<div className="space-y-4 bg-slate-100"> <div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormTeks /> <FormTeks />
</div> </div>
</div> </div>

2
app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx
View File

@ -5,7 +5,7 @@ const TeksDetailPage = async () => {
return ( return (
<div> <div>
<SiteBreadcrumb /> <SiteBreadcrumb />
<div className="space-y-4 bg-slate-100"> <div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormTeksDetail /> <FormTeksDetail />
</div> </div>
</div> </div>

10
app/[locale]/(admin)/admin/content/text/page.tsx
View File

@ -12,12 +12,12 @@ const ReactTableDocumentPage = () => {
const { can } = usePermission(); const { can } = usePermission();
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-default-50">
{/* <SiteBreadcrumb /> */} <SiteBreadcrumb />
<div className="p-6"> <div className="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0"> <Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg"> <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle> <CardTitle>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -25,7 +25,7 @@ const ReactTableDocumentPage = () => {
<UploadIcon className="w-4 h-4 text-blue-600" /> <UploadIcon className="w-4 h-4 text-blue-600" />
</div> </div>
<div> <div>
<h1 className="text-xl font-semibold text-gray-900"> <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Document Management Document Management
</h1> </h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -50,7 +50,7 @@ const ReactTableDocumentPage = () => {
</div> </div>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-6 bg-gray-50"> <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<DocumentTabs /> <DocumentTabs />
</CardContent> </CardContent>
</Card> </Card>

2
app/[locale]/(admin)/admin/content/video/components/audio-visual-tabs.tsx
View File

@ -35,7 +35,7 @@ const AudioVisualTabs = () => {
</div> */} </div> */}
<TabsContent value="submitted" className="mt-0"> <TabsContent value="submitted" className="mt-0">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white dark:bg-default-50 rounded-lg border border-gray-200 shadow-sm">
<TableVideo /> <TableVideo />
</div> </div>
</TabsContent> </TabsContent>

2
app/[locale]/(admin)/admin/content/video/detail/[id]/page.tsx
View File

@ -5,7 +5,7 @@ const VideoDetailPage = async () => {
return ( return (
<div> <div>
<SiteBreadcrumb /> <SiteBreadcrumb />
<div className="space-y-4 bg-slate-100"> <div className="space-y-4 bg-slate-100 dark:bg-default-50">
<FormVideoDetail /> <FormVideoDetail />
</div> </div>
</div> </div>

10
app/[locale]/(admin)/admin/content/video/page.tsx
View File

@ -12,20 +12,20 @@ const ReactTableAudioVisualPage = () => {
const { can } = usePermission(); const { can } = usePermission();
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-default-50">
<SiteBreadcrumb /> <SiteBreadcrumb />
<div className="p-6"> <div className="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<Card className="shadow-sm border-0"> <Card className="shadow-sm border-0">
<CardHeader className="border-b border-gray-200 bg-white rounded-t-lg"> <CardHeader className="border-b border-gray-200 bg-white dark:bg-default-50 rounded-t-lg">
<CardTitle> <CardTitle>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center"> <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
<UploadIcon className="w-4 h-4 text-blue-600" /> <UploadIcon className="w-4 h-4 text-blue-600" />
</div> </div>
<div> <div>
<h1 className="text-xl font-semibold text-gray-900"> <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Audio-Visual Management Audio-Visual Management
</h1> </h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -50,7 +50,7 @@ const ReactTableAudioVisualPage = () => {
</div> </div>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-6 bg-gray-50"> <CardContent className="p-6 bg-gray-50 dark:bg-default-50">
<AudioVisualTabs /> <AudioVisualTabs />
</CardContent> </CardContent>
</Card> </Card>

2
app/[locale]/(admin)/admin/management-user/page.tsx
View File

@ -32,7 +32,7 @@ export default function ManagementUser() {
return ( return (
<div> <div>
<SiteBreadcrumb /> <SiteBreadcrumb />
<section className="flex flex-col gap-2 bg-white rounded-lg p-3 mt-5 border"> <section className="flex flex-col gap-2 bg-white dark:bg-default-50 rounded-lg p-3 mt-5 border">
<div className="flex justify-between py-3"> <div className="flex justify-between py-3">
<p className="text-lg"> <p className="text-lg">
Data User Data User

19
app/[locale]/globals.css
View File

@ -133,6 +133,25 @@
} }
} }
@layer base {
/* CKEditor – force light mode even in dark */
.ck-viewer .ck.ck-editor__main > .ck-editor__editable {
@apply bg-white text-black;
}
.ck-viewer .ck-content {
@apply text-black;
}
.ck-viewer .ck-content h1,
.ck-viewer .ck-content h2,
.ck-viewer .ck-content h3,
.ck-viewer .ck-content p,
.ck-viewer .ck-content li {
@apply text-black;
}
}
/* @import "tailwindcss"; /* @import "tailwindcss";
@import "tw-animate-css"; @import "tw-animate-css";

41
components/editor/view-editor.js
View File

@ -1,18 +1,39 @@
// import React from "react";
// import { CKEditor } from "@ckeditor/ckeditor5-react";
// import Editor from "@/vendor/ckeditor5/build/ckeditor";
// function ViewEditor(props) {
// return (
// <CKEditor
// editor={Editor}
// data={props.initialData}
// disabled={true}
// config={{
// // toolbar: [],
// isReadOnly: true,
// }}
// />
// );
// }
// export default ViewEditor;
import React from "react"; import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react"; import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "@/vendor/ckeditor5/build/ckeditor"; import Editor from "@/vendor/ckeditor5/build/ckeditor";
function ViewEditor(props) { function ViewEditor({ initialData }) {
return ( return (
<CKEditor <div className="ck-viewer">
editor={Editor} <CKEditor
data={props.initialData} editor={Editor}
disabled={true} data={initialData}
config={{ disabled
// toolbar: [], config={{
isReadOnly: true, isReadOnly: true,
}} }}
/> />
</div>
); );
} }

6
components/form/categories/categories-update-form.tsx
View File

@ -225,13 +225,13 @@ export default function CategoriesUpdateForm() {
</div> </div>
</div> </div>
<Button <button
type="submit" type="submit"
className="w-full mt-4 bg-green-600 text-white" className="w-full mt-4 bg-[#1f2937] text-white py-2 rounded-xl hover:bg-slate-500"
disabled={isSubmitting || isUploading} disabled={isSubmitting || isUploading}
> >
{isSubmitting ? "Menyimpan..." : "Simpan Perubahan"} {isSubmitting ? "Menyimpan..." : "Simpan Perubahan"}
</Button> </button>
</Card> </Card>
{/* SIDEBAR */} {/* SIDEBAR */}

12
components/landing-page/navbar.tsx
View File

@ -75,7 +75,7 @@ export default function Navbar() {
const fullname = Cookies.get("ufne"); const fullname = Cookies.get("ufne");
return ( return (
<header className="relative max-w-[1400px] mx-auto flex items-center justify-between px-4 py-3 border-b bg-white z-50"> <header className="relative max-w-[1400px] mx-auto flex items-center justify-between px-4 py-3 border-b bg-white dark:bg-default-50 z-50">
<div className="flex flex-row items-center justify-between space-x-4 z-10"> <div className="flex flex-row items-center justify-between space-x-4 z-10">
<Menu <Menu
className="w-6 h-6 cursor-pointer" className="w-6 h-6 cursor-pointer"
@ -92,6 +92,10 @@ export default function Navbar() {
</Link> </Link>
<DynamicLogoTenant /> <DynamicLogoTenant />
<div className="hidden custom-lg-button:flex items-end">
<ThemeSwitcher />
</div>
</div> </div>
{/* 🌐 NAV MENU */} {/* 🌐 NAV MENU */}
@ -171,10 +175,6 @@ export default function Navbar() {
})} })}
</nav> </nav>
{/* <div className="hidden custom-lg-button:flex text-left">
<ThemeSwitcher />
</div> */}
{/* 🔹 PROFILE / LOGIN SECTION */} {/* 🔹 PROFILE / LOGIN SECTION */}
<nav className="hidden md:flex items-center gap-3 z-10 relative"> <nav className="hidden md:flex items-center gap-3 z-10 relative">
{!isLoggedIn ? ( {!isLoggedIn ? (
@ -357,7 +357,7 @@ export default function Navbar() {
</Link> </Link>
<Link <Link
href="/auth/register" href="/auth/register"
className="block text-lg text-gray-800" className="block text-lg text-gray-800 dark:text-white"
> >
{t("register")} {t("register")}
</Link> </Link>

2
components/table/management-user/management-user-internal-table.tsx
View File

@ -193,7 +193,7 @@ const UserInternalTable = () => {
}; };
return ( return (
<div className="bg-white"> <div className="bg-white dark:bg-default-50">
<div className="flex justify-between py-3"> <div className="flex justify-between py-3">
<Input <Input
type="text" type="text"