date selector

web/src/styles.css

@@ -2095,6 +2095,117 @@ footer span:first-child {
   color: var(--muted);
   font-size: 12px;
 }
+.date-select {
+  position: relative;
+}
+.date-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 39px;
+  padding: 10px 11px;
+  border: 1px solid #dbe2ea;
+  border-radius: 5px;
+  background: #fff;
+  color: #33445a;
+  font-weight: 400;
+  cursor: pointer;
+  text-align: left;
+}
+.date-trigger:hover {
+  border-color: #c2d3ce;
+}
+.date-trigger svg {
+  color: #8ba59d;
+}
+.filters .date-trigger {
+  height: 35px;
+  min-height: 35px;
+  font-size: 11px;
+  padding: 7px 9px;
+  background: #fcfdfe;
+}
+.date-placeholder {
+  color: #93a0ad;
+}
+.date-popover {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 252px;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #dbe2ea;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px #10223418;
+}
+.date-nav {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 8px;
+}
+.date-nav select {
+  flex: 1;
+  min-width: 0;
+  height: 30px;
+  min-height: 30px;
+  padding: 4px 6px;
+  border: 1px solid #e3e9ef;
+  border-radius: 5px;
+  background: #fff;
+  color: #33445a;
+  font-size: 12px;
+  font-weight: 400;
+}
+.date-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.date-weekday {
+  text-align: center;
+  font-size: 10px;
+  font-weight: 600;
+  color: #93a0ad;
+  padding-bottom: 3px;
+}
+.date-day {
+  height: 29px;
+  border: 0;
+  border-radius: 5px;
+  background: none;
+  color: #35485c;
+  font-size: 12px;
+  cursor: pointer;
+}
+.date-day:hover:not(:disabled) {
+  background: #f0f7f4;
+}
+.date-day:disabled {
+  color: #c4ccd4;
+  cursor: not-allowed;
+}
+.date-day.today {
+  box-shadow: inset 0 0 0 1px #b9ded0;
+}
+.date-day.selected {
+  background: var(--emerald);
+  color: #fff;
+  font-weight: 600;
+}
+.date-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+}
+.date-actions .button {
+  flex: 1;
+  min-height: 30px;
+  font-size: 11px;
+}
 
 .category-tree {
   padding: 0 17px 23px;