ajikamaludin
/
monitor-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UPDATE COLOR

Browse Source
dev
Aji Kamaludin 1 year ago
parent ac85c4c9e4
commit e07fc8bd1f
No known key found for this signature in database
GPG Key ID: 19058F67F0083AD3
4 changed files with 272 additions and 83 deletions
Show Stats Download Patch File Download Diff File

64
app/Models/Document.php
Unescape Escape View File

@ -42,7 +42,7 @@ class Document extends Model
'due_date' => 'datetime:Y-m-d' 'due_date' => 'datetime:Y-m-d'
]; ];
protected $appends = ['due_status']; protected $appends = ['due_status', 'due_status_color'];
public function creator() public function creator()
{ {
@ -68,24 +68,53 @@ class Document extends Model
{ {
return Attribute::make( return Attribute::make(
get: function () { get: function () {
$diff = $this->category->duration; $maxMonthDiff = 3;
$maxDayDiff = 30; //$this->category->duration;
if ($this->due_date == null) { if ($this->due_date == null) {
return ''; return '';
} }
if (now()->toDateString() == $this->due_date->toDateString()) { if (now()->toDateString() == $this->due_date->toDateString()) {
return "hari ini jatuh tempo"; return "hari ini jatuh tempo";
} }
$date = now()->diffInDays($this->due_date, false) + 1; $diffMonth = now()->diffInMonths($this->due_date, true);
if ($maxMonthDiff >= $diffMonth && $diffMonth > 0) {
return $diffMonth . " bulan mendekati jatuh tempo";
}
$diffDays = now()->diffInDays($this->due_date, false);
if ($diff >= $date && $date > 0) { if ($maxDayDiff >= $diffDays && $diffDays > 0) {
return $date . " hari mendekati jatuh tempo"; return $diffDays . " hari mendekati jatuh tempo";
} }
if ($date <= 0) { if ($diffDays <= 0) {
return "jatuh tempo"; return "jatuh tempo";
} }
}, }
);
}
protected function dueStatusColor(): Attribute
{
return Attribute::make(
get: function () {
$maxMonthDiff = 3;
$diffMonth = now()->diffInMonths($this->due_date, true);
if ($maxMonthDiff >= $diffMonth && $diffMonth > 0) {
return [
1 => '#dc2626',
2 => '#facc15',
3 => '#4ade80',
][$diffMonth];
}
return '#dc2626';
}
); );
} }
@ -93,7 +122,8 @@ class Document extends Model
{ {
return Attribute::make( return Attribute::make(
get: function () { get: function () {
$diff = $this->category->duration; $maxMonthDiff = 3;
$diff = 30; //$this->category->duration;
if ($this->due_date == null) { if ($this->due_date == null) {
return 0; return 0;
@ -103,12 +133,19 @@ class Document extends Model
return 0; return 0;
} }
$date = now()->diffInDays($this->due_date, false) + 1; $diffMonth = now()->diffInMonths($this->due_date, true);
if ($diff >= $date && $date > 0) { if ($maxMonthDiff >= $diffMonth && $diffMonth > 0) {
return $date; return $diffMonth;
} }
if ($date <= 0) {
$diffDays = now()->diffInDays($this->due_date, false) + 1;
if ($diff >= $diffDays && $diffDays > 0) {
return $diffDays;
}
if ($diffDays <= 0) {
return 0; return 0;
} }
@ -117,7 +154,8 @@ class Document extends Model
); );
} }
public function scopeCloseToExpired($query) { public function scopeCloseToExpired($query)
{
$ids = collect(); $ids = collect();
$categories = Category::all(); $categories = Category::all();
foreach ($categories as $category) { foreach ($categories as $category) {

13
docker-compose.yml
Unescape Escape View File

@ -39,6 +39,19 @@ services:
networks: networks:
monitordoc: monitordoc:
ipv4_address: 10.4.0.99 ipv4_address: 10.4.0.99
nodejs:
image: node:16-alpine
container_name: monitordoc-node
ports:
- 5173:5173
volumes:
- ./:/var/www
working_dir: /var/www
entrypoint: ["npm","run", "dev"]
networks:
monitordoc:
ipv4_address: 10.4.0.100
networks: networks:
monitordoc: monitordoc:
driver: bridge driver: bridge

2
package.json
Unescape Escape View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite --host 0.0.0.0",
"build": "vite build" "build": "vite build"
}, },
"devDependencies": { "devDependencies": {

220
resources/js/Pages/Document/Index.jsx
Unescape Escape View File

@ -46,20 +46,16 @@ export default function Document(props) {
setSearch({ setSearch({
...search, ...search,
sortBy: key, sortBy: key,
sortRule: search.sortRule == 'asc' ? 'desc' : 'asc' sortRule: search.sortRule == 'asc' ? 'desc' : 'asc',
}) })
} }
useEffect(() => { useEffect(() => {
if (preValue) { if (preValue) {
router.get( router.get(route(route().current()), search, {
route(route().current()),
search,
{
replace: true, replace: true,
preserveState: true, preserveState: true,
} })
)
} }
}, [search]) }, [search])
@ -81,7 +77,7 @@ export default function Document(props) {
<div className="card bg-base-100 w-full"> <div className="card bg-base-100 w-full">
<div className="card-body"> <div className="card-body">
<div className="flex flex-col md:flex-row w-full mb-4 justify-between space-y-1 md:space-y-0"> <div className="flex flex-col md:flex-row w-full mb-4 justify-between space-y-1 md:space-y-0">
<div className='flex flex-row gap-2'> <div className="flex flex-row gap-2">
{canCreate && ( {canCreate && (
<Link <Link
className="btn btn-neutral" className="btn btn-neutral"
@ -91,12 +87,15 @@ export default function Document(props) {
</Link> </Link>
)} )}
{canImport && ( {canImport && (
<div className='btn btn-outline' onClick={importModal.toggle}> <div
className="btn btn-outline"
onClick={importModal.toggle}
>
Import Import
</div> </div>
)} )}
</div> </div>
<div className='flex md:flex-row flex-col gap-2'> <div className="flex md:flex-row flex-col gap-2">
<div className="form-control w-full"> <div className="form-control w-full">
<input <input
type="text" type="text"
@ -108,22 +107,98 @@ export default function Document(props) {
placeholder="Search" placeholder="Search"
/> />
</div> </div>
<div className='flex flex-row gap-2'> <div className="flex flex-row gap-2">
<div className="dropdown dropdown-end"> <div className="dropdown dropdown-end">
<label tabIndex={0} className="btn btn-outline">Filter</label> <label
<ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"> tabIndex={0}
<li><div onClick={() => handleFilter({status: 0})}>Semua</div></li> className="btn btn-outline"
<li><div onClick={() => handleFilter({status: 1})}>Jatuh Tempo</div></li> >
<li><div onClick={() => handleFilter({status: 2})}>Mendekati Jatuh Tempo</div></li> Filter
</label>
<ul
tabIndex={0}
className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
>
<li>
<div
onClick={() =>
handleFilter({
status: 0,
})
}
>
Semua
</div>
</li>
<li>
<div
onClick={() =>
handleFilter({
status: 1,
})
}
>
Jatuh Tempo
</div>
</li>
<li>
<div
onClick={() =>
handleFilter({
status: 2,
})
}
>
Mendekati Jatuh Tempo
</div>
</li>
</ul> </ul>
</div> </div>
{canExport && ( {canExport && (
<div className="dropdown dropdown-end"> <div className="dropdown dropdown-end">
<label tabIndex={0} className="btn btn-outline">Export</label> <label
<ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"> tabIndex={0}
<li><a href={route('docs.export', {type: 'excel'})} target='_blank'>XLSX</a></li> className="btn btn-outline"
<li><a href={route('docs.export', {type: 'pdf'})} target='_blank'>PDF</a></li> >
<li><a href={route('docs.export', {type: ''})} target='_blank'>Print</a></li> Export
</label>
<ul
tabIndex={0}
className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
>
<li>
<a
href={route(
'docs.export',
{ type: 'excel' }
)}
target="_blank"
>
XLSX
</a>
</li>
<li>
<a
href={route(
'docs.export',
{ type: 'pdf' }
)}
target="_blank"
>
PDF
</a>
</li>
<li>
<a
href={route(
'docs.export',
{ type: '' }
)}
target="_blank"
>
Print
</a>
</li>
</ul> </ul>
</div> </div>
)} )}
@ -135,12 +210,32 @@ export default function Document(props) {
<thead> <thead>
<tr> <tr>
<th>Perusahaan</th> <th>Perusahaan</th>
<th className='hover:underline' onClick={() => sort('type_id')}>Jenis</th> <th
<th className='hover:underline' onClick={() => sort('category_id')}>Ketegori</th> className="hover:underline"
onClick={() => sort('type_id')}
>
Jenis
</th>
<th
className="hover:underline"
onClick={() => sort('category_id')}
>
Ketegori
</th>
<th>No Dokumen</th> <th>No Dokumen</th>
<th>Nama Dokumen</th> <th>Nama Dokumen</th>
<th className='hover:underline' onClick={() => sort('publish_date')}>Tanggal Terbit</th> <th
<th className='hover:underline' onClick={() => sort('due_date')}>Tanggal Berakhir</th> className="hover:underline"
onClick={() => sort('publish_date')}
>
Tanggal Terbit
</th>
<th
className="hover:underline"
onClick={() => sort('due_date')}
>
Tanggal Berakhir
</th>
<th>Catatan</th> <th>Catatan</th>
<th></th> <th></th>
</tr> </tr>
@ -148,33 +243,79 @@ export default function Document(props) {
<tbody> <tbody>
{docs?.map((doc) => ( {docs?.map((doc) => (
<tr key={doc.id}> <tr key={doc.id}>
<td>{doc.company.short} ({doc.company.region.name})</td> <td>
{doc.company.short} (
{doc.company.region.name})
</td>
<td>{doc.variety.name}</td> <td>{doc.variety.name}</td>
<td>{doc.category.name}</td> <td>{doc.category.name}</td>
<td>{doc.no_doc}</td> <td>{doc.no_doc}</td>
<td>{doc.name}</td> <td>{doc.name}</td>
<td> <td>
{doc.publish_date !== null ? formatDate(doc.publish_date) : ''} {doc.publish_date !== null
? formatDate(
doc.publish_date
)
: ''}
</td> </td>
<td> <td>
{doc.due_date !== null ? formatDate(doc.due_date) : ''} {doc.due_date !== null
? formatDate(doc.due_date)
: ''}
</td> </td>
<th>{doc.due_status}</th> <th
<td className='text-right w-1/8'> style={{
color: doc.due_status_color,
}}
>
{doc.due_status}
</th>
<td className="text-right w-1/8">
<div className="dropdown dropdown-left"> <div className="dropdown dropdown-left">
<label tabIndex={0} className="btn btn-sm m-1 px-1"><IconMenu/></label> <label
<ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"> tabIndex={0}
className="btn btn-sm m-1 px-1"
>
<IconMenu />
</label>
<ul
tabIndex={0}
className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
>
<li> <li>
<Link href={route('docs.show', doc)}>Detail</Link> <Link
href={route(
'docs.show',
doc
)}
>
Detail
</Link>
</li> </li>
{canUpdate && ( {canUpdate && (
<li> <li>
<Link href={route('docs.edit', doc)}>Edit</Link> <Link
href={route(
'docs.edit',
doc
)}
>
Edit
</Link>
</li> </li>
)} )}
{canDelete && ( {canDelete && (
<li onClick={() => handleDelete(doc)} className="bg-error "> <li
<div>Delete</div> onClick={() =>
handleDelete(
doc
)
}
className="bg-error "
>
<div>
Delete
</div>
</li> </li>
)} )}
</ul> </ul>
@ -184,11 +325,10 @@ export default function Document(props) {
))} ))}
</tbody> </tbody>
</table> </table>
<div className='w-full flex justify-center'> <div className="w-full flex justify-center">
<Pagination links={links} params={search} /> <Pagination links={links} params={search} />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -198,9 +338,7 @@ export default function Document(props) {
toggle={confirmModal.toggle} toggle={confirmModal.toggle}
onConfirm={onDelete} onConfirm={onDelete}
/> />
<ModalImport <ModalImport modalState={importModal} />
modalState={importModal}
/>
</AuthenticatedLayout> </AuthenticatedLayout>
) )
} }
Write Preview
Loading…
Cancel
Save