Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
7eba0ddde6 | ||
|
|
b7cb3cc5b5 |
@ -3,10 +3,9 @@ import { mdiLogout, mdiClose } from '@mdi/js'
|
|||||||
import BaseIcon from './BaseIcon'
|
import BaseIcon from './BaseIcon'
|
||||||
import AsideMenuList from './AsideMenuList'
|
import AsideMenuList from './AsideMenuList'
|
||||||
import { MenuAsideItem } from '../interfaces'
|
import { MenuAsideItem } from '../interfaces'
|
||||||
import { useAppSelector } from '../stores/hooks'
|
import { useAppDispatch, useAppSelector } from '../stores/hooks'
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
import { useAppDispatch } from '../stores/hooks';
|
|
||||||
import { createAsyncThunk } from '@reduxjs/toolkit';
|
import { createAsyncThunk } from '@reduxjs/toolkit';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import React, {useEffect, useRef} from 'react'
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
|
||||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||||
import BaseDivider from './BaseDivider'
|
import BaseDivider from './BaseDivider'
|
||||||
import BaseIcon from './BaseIcon'
|
import BaseIcon from './BaseIcon'
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import React, { ReactNode, useEffect } from 'react'
|
import React, { ReactNode, useEffect, useState } from 'react'
|
||||||
import { useState } from 'react'
|
|
||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||||
import menuAside from '../menuAside'
|
import menuAside from '../menuAside'
|
||||||
|
|||||||
@ -2,6 +2,13 @@ import * as icon from '@mdi/js';
|
|||||||
import { MenuAsideItem } from './interfaces'
|
import { MenuAsideItem } from './interfaces'
|
||||||
|
|
||||||
const menuAside: MenuAsideItem[] = [
|
const menuAside: MenuAsideItem[] = [
|
||||||
|
|
||||||
|
{
|
||||||
|
href: '/optema-ai',
|
||||||
|
icon: icon.mdiBrain,
|
||||||
|
label: 'OPTEMA AI Lab',
|
||||||
|
permissions: 'READ_CASES'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
href: '/dashboard',
|
href: '/dashboard',
|
||||||
icon: icon.mdiViewDashboardOutline,
|
icon: icon.mdiViewDashboardOutline,
|
||||||
|
|||||||
@ -1,166 +1,159 @@
|
|||||||
|
import { mdiArrowRight, mdiBrain, mdiChartTimelineVariant, mdiClipboardTextClockOutline, mdiLightbulbOnOutline, mdiLogin } from '@mdi/js';
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import type { ReactElement } from 'react';
|
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import BaseButton from '../components/BaseButton';
|
import React, { ReactElement } from 'react';
|
||||||
import CardBox from '../components/CardBox';
|
import BaseIcon from '../components/BaseIcon';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
|
const pillars = [
|
||||||
|
{
|
||||||
|
icon: mdiBrain,
|
||||||
|
title: 'Problem Detection',
|
||||||
|
text: 'Tangkap masalah bisnis berbahasa bebas, lalu ubah menjadi prioritas, dampak, dan sinyal keputusan yang lebih terstruktur.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: mdiChartTimelineVariant,
|
||||||
|
title: 'Root Cause Map',
|
||||||
|
text: 'Simulasikan peta akar masalah ala 5-Why/Fishbone agar tim tidak terburu-buru memilih solusi permukaan.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: mdiLightbulbOnOutline,
|
||||||
|
title: 'Decision Scoring',
|
||||||
|
text: 'Ranking solusi memakai Impact, Efficiency, Speed, dan Low Risk sehingga opsi terbaik terlihat jelas.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: mdiClipboardTextClockOutline,
|
||||||
|
title: 'Action Plan',
|
||||||
|
text: 'Ubah keputusan terpilih menjadi rencana kerja 5 hari yang bisa langsung dieksekusi dan dilacak.',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function Starter() {
|
const Landing = () => (
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
<>
|
||||||
src: undefined,
|
<Head>
|
||||||
photographer: undefined,
|
<title>{getPageTitle('OPTEMA AI')}</title>
|
||||||
photographer_url: undefined,
|
<meta name="description" content="OPTEMA AI membantu founder, UMKM, dan tim bisnis mengubah masalah menjadi keputusan dan action plan." />
|
||||||
})
|
</Head>
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
|
||||||
const [contentType, setContentType] = useState('video');
|
|
||||||
const [contentPosition, setContentPosition] = useState('left');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
||||||
|
|
||||||
const title = 'OPTEMA AI'
|
<main className="min-h-screen overflow-hidden bg-[#F7FAFC] text-[#08111F] dark:bg-[#08111F] dark:text-white">
|
||||||
|
<section className="relative isolate">
|
||||||
|
<div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,_rgba(19,184,166,0.24),_transparent_32%),radial-gradient(circle_at_top_right,_rgba(249,115,22,0.18),_transparent_30%)]" />
|
||||||
|
<nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-6 lg:px-8">
|
||||||
|
<Link href="/" className="flex items-center gap-3 font-black tracking-tight">
|
||||||
|
<span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#08111F] text-white shadow-lg shadow-cyan-900/20">
|
||||||
|
<BaseIcon path={mdiBrain} size={26} />
|
||||||
|
</span>
|
||||||
|
<span className="text-xl">OPTEMA AI</span>
|
||||||
|
</Link>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Link href="/login" className="hidden rounded-full px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-white hover:shadow-sm dark:text-slate-200 dark:hover:bg-white/10 sm:inline-flex">
|
||||||
|
Login
|
||||||
|
</Link>
|
||||||
|
<Link href="/login" className="inline-flex items-center gap-2 rounded-full bg-[#08111F] px-5 py-2.5 text-sm font-bold text-white shadow-xl shadow-slate-900/10 transition hover:-translate-y-0.5 hover:bg-[#102A43]">
|
||||||
|
Admin Interface <BaseIcon path={mdiLogin} size={18} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
<div className="mx-auto grid max-w-7xl items-center gap-12 px-6 pb-20 pt-10 lg:grid-cols-[1.05fr_0.95fr] lg:px-8 lg:pb-28 lg:pt-16">
|
||||||
useEffect(() => {
|
<div>
|
||||||
async function fetchData() {
|
<div className="mb-6 inline-flex rounded-full bg-white px-4 py-2 text-sm font-bold text-[#0F766E] shadow-sm ring-1 ring-cyan-100 dark:bg-white/10 dark:text-cyan-200 dark:ring-white/10">
|
||||||
const image = await getPexelsImage();
|
Decision Intelligence Platform untuk UMKM & tim bisnis
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<h1 className="max-w-4xl text-5xl font-black tracking-tight text-[#08111F] dark:text-white sm:text-6xl lg:text-7xl">
|
||||||
);
|
Dari masalah menjadi keputusan, dari keputusan menjadi hasil.
|
||||||
|
</h1>
|
||||||
|
<p className="mt-7 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-300">
|
||||||
|
OPTEMA AI membantu Anda memasukkan masalah bisnis yang masih messy, lalu menghasilkan prioritas, akar masalah, ranking solusi, dan rencana aksi praktis dalam satu alur kerja.
|
||||||
|
</p>
|
||||||
|
<div className="mt-10 flex flex-col gap-3 sm:flex-row">
|
||||||
|
<Link href="/login" className="inline-flex items-center justify-center gap-2 rounded-full bg-[#13B8A6] px-7 py-4 text-base font-black text-white shadow-2xl shadow-cyan-900/20 transition hover:-translate-y-1 hover:bg-[#0F766E]">
|
||||||
|
Mulai di Admin <BaseIcon path={mdiArrowRight} size={20} />
|
||||||
|
</Link>
|
||||||
|
<Link href="/login" className="inline-flex items-center justify-center rounded-full border border-slate-200 bg-white px-7 py-4 text-base font-bold text-slate-800 shadow-sm transition hover:-translate-y-1 hover:shadow-md dark:border-white/10 dark:bg-white/10 dark:text-white">
|
||||||
|
Login ke Dashboard
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="mt-10 grid max-w-xl grid-cols-3 gap-4 text-sm">
|
||||||
|
<div className="rounded-3xl bg-white p-4 shadow-sm dark:bg-white/10">
|
||||||
|
<p className="text-3xl font-black text-[#13B8A6]">4</p>
|
||||||
|
<p className="text-slate-500 dark:text-slate-300">Kriteria skor</p>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-3xl bg-white p-4 shadow-sm dark:bg-white/10">
|
||||||
|
<p className="text-3xl font-black text-[#F97316]">5</p>
|
||||||
|
<p className="text-slate-500 dark:text-slate-300">Hari action plan</p>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-3xl bg-white p-4 shadow-sm dark:bg-white/10">
|
||||||
|
<p className="text-3xl font-black text-[#102A43] dark:text-white">1</p>
|
||||||
|
<p className="text-slate-500 dark:text-slate-300">Alur keputusan</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
<div className="relative">
|
||||||
if (video?.video_files?.length > 0) {
|
<div className="absolute -inset-6 -z-10 rounded-[3rem] bg-gradient-to-br from-cyan-200 via-white to-orange-100 blur-2xl dark:from-cyan-900 dark:via-slate-900 dark:to-orange-950" />
|
||||||
return (
|
<div className="rounded-[2rem] border border-white/80 bg-white/85 p-5 shadow-2xl shadow-slate-900/10 backdrop-blur dark:border-white/10 dark:bg-white/10">
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
<div className="rounded-[1.5rem] bg-[#08111F] p-6 text-white">
|
||||||
<video
|
<div className="flex items-center justify-between">
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
<div>
|
||||||
autoPlay
|
<p className="text-sm font-semibold text-cyan-200">Live decision preview</p>
|
||||||
loop
|
<h2 className="mt-1 text-2xl font-black">Penjualan turun 40%</h2>
|
||||||
muted
|
</div>
|
||||||
>
|
<span className="rounded-full bg-orange-500 px-3 py-1 text-xs font-black">Critical</span>
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
</div>
|
||||||
Your browser does not support the video tag.
|
<div className="mt-6 grid grid-cols-3 gap-3">
|
||||||
</video>
|
{['Impact 90', 'Efficiency 80', 'Speed 85'].map((item) => (
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
<div key={item} className="rounded-2xl bg-white/10 p-3 text-center text-sm font-bold ring-1 ring-white/10">
|
||||||
<a
|
{item}
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>)
|
))}
|
||||||
}
|
</div>
|
||||||
};
|
<div className="mt-6 rounded-3xl bg-white p-5 text-[#08111F]">
|
||||||
|
<div className="mb-3 flex items-center justify-between">
|
||||||
return (
|
<p className="font-black">Rekomendasi #1</p>
|
||||||
<div
|
<span className="rounded-full bg-emerald-50 px-3 py-1 text-xs font-black text-emerald-700">Score 86</span>
|
||||||
style={
|
</div>
|
||||||
contentPosition === 'background'
|
<p className="text-sm text-slate-600">Optimasi funnel penjualan 7 hari dengan eksperimen pesan, channel, dan evaluasi harian.</p>
|
||||||
? {
|
<div className="mt-5 space-y-3">
|
||||||
backgroundImage: `${
|
{[92, 84, 76].map((value, index) => (
|
||||||
illustrationImage
|
<div key={value}>
|
||||||
? `url(${illustrationImage.src?.original})`
|
<div className="mb-1 flex justify-between text-xs font-bold text-slate-500">
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
<span>{['Root cause: konversi', 'Marketing signal', 'Risiko eksekusi'][index]}</span>
|
||||||
}`,
|
<span>{value}%</span>
|
||||||
backgroundSize: 'cover',
|
</div>
|
||||||
backgroundPosition: 'left center',
|
<div className="h-2 rounded-full bg-slate-100">
|
||||||
backgroundRepeat: 'no-repeat',
|
<div className="h-2 rounded-full bg-gradient-to-r from-[#13B8A6] to-[#F97316]" style={{ width: `${value}%` }} />
|
||||||
}
|
</div>
|
||||||
: {}
|
</div>
|
||||||
}
|
))}
|
||||||
>
|
</div>
|
||||||
<Head>
|
</div>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
</div>
|
||||||
</Head>
|
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
|
||||||
<div
|
|
||||||
className={`flex ${
|
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
|
||||||
} min-h-screen w-full`}
|
|
||||||
>
|
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
|
||||||
? imageBlock(illustrationImage)
|
|
||||||
: null}
|
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: null}
|
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your OPTEMA AI app!"/>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
|
||||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<BaseButtons>
|
|
||||||
<BaseButton
|
|
||||||
href='/login'
|
|
||||||
label='Login'
|
|
||||||
color='info'
|
|
||||||
className='w-full'
|
|
||||||
/>
|
|
||||||
|
|
||||||
</BaseButtons>
|
|
||||||
</CardBox>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</SectionFullScreen>
|
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
|
||||||
Privacy Policy
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<section className="mx-auto max-w-7xl px-6 pb-24 lg:px-8">
|
||||||
);
|
<div className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
|
||||||
}
|
{pillars.map((pillar) => (
|
||||||
|
<article key={pillar.title} className="rounded-[2rem] border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-white/10">
|
||||||
|
<div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-50 text-[#0F766E] dark:bg-cyan-900/40 dark:text-cyan-200">
|
||||||
|
<BaseIcon path={pillar.icon} size={26} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-black">{pillar.title}</h3>
|
||||||
|
<p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{pillar.text}</p>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
Landing.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default Landing;
|
||||||
|
|||||||
2376
frontend/src/pages/optema-ai.tsx
Normal file
2376
frontend/src/pages/optema-ai.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,7 @@
|
|||||||
import React, { ReactElement, useEffect, useState } from 'react';
|
import React, { ReactElement, useEffect, useState } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import 'react-datepicker/dist/react-datepicker.css';
|
import 'react-datepicker/dist/react-datepicker.css';
|
||||||
import { useAppDispatch } from '../stores/hooks';
|
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||||
|
|
||||||
import { useAppSelector } from '../stores/hooks';
|
|
||||||
|
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import LayoutAuthenticated from '../layouts/Authenticated';
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user